Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

HTML5 - Canvas API

CANVAS API

O elemento canvas

A Canvas API permite a você desenhar na tela do navegador via Javascript. O único elemento HTML existente para isso é o elemento canvas, o resto todo é feito via Javascript. Veja como inserir o elemento canvas numa página:

<canvas id="x" width="300" height="300"></canvas>

Isso vai exibir um retângulo vazio. Para desenhar nele, primeiro obtemos o contexto de desenho, com Javascript:

context=document.getElementById('x').getContext('2d')

Agora que temos um contexto, podemos desenhar nele. Vamos começar com um simples retângulo:

context.fillRect(10, 10, 50, 150)

Simples, não? Que tal tentarmos algo um pouco mais complexo? Dê uma olhada no exemplo:

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>Canvas API</title>
</head>
<body>
<canvasid=”x” width=”300” height=”300”></canvas>
<button onclick=”desenhar()”>desenhar</button>
<script>
function desenhar(){
// Obtemos o contexto
context=document.getElementById(‘x’).getContext(‘2d’)
//Iniciamos um novo desenho
context.beginPath()
//Movemos a caneta para o inicio do desenho
context.moveTo(150,50)
//Desenhamos as linhas
context.lineTo(220,250)
context.lineTo(50,125)
context.lineTo(250,125)
context.lineTo(80,250)
context.lineTo(150,50)
//O desenho não é de verdade enquanto você
//não mandar o contexto pintá-lo.
//Vamos pintar o interior de amarelo
context.fillStyle=’#ff0’
context.fill()
//Vamos pintar as linhas de vermelho.
context.strokeStyle=’#f00’
context.stroke()
}
</script>
</body>
</html>

E veja o que acontece quando se clica no botão:

Há muito mais para você estudar se quiser se aprofundar na Canvas API. Apenas para que você tenha uma idéia, é possível desenhar texto, sombras, gradientes, incluir imagens no canvas, manipular os pixels, rotacionar e transformar os objetos.

Canvas e SVG Uma dúvida muito comum é quando usar Canvas, quando usar SVG. Para saber escolher, é preciso entender as diferenças entre um e outro. SVG é vetorial, e baseado em XML, logo, acessível via DOM. Canvas é desenhado pixel a pixel, via Javascript.

Assim, as vantagens do SVG são:

  1. O conteúdo é acessível a leitores de tela
  2. O gráfico é escalável, não perde resolução ou serrilha ao redimensionar
  3. O conteúdo é acessível via DOM

E as vantagens do Canvas:

  1. A performance é muito superior ao SVG na maioria dos casos
  2. É fácil desenhar via Javascript. Em SVG, é preciso fazer seu script escrever XML para você. Com Canvas você só manda desenhar, e pronto.

 

Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com

 

Tags:

Follow the Discussion

  • Show!

     

  • ORlandoORlando

    muito louco esse canvas!

  • O Canvas é bem melhor q o anterior 

  • Canvas \o/

  • Wellington CesarWellington Cesar

    Estranho no meu Chrome não está entendendo a linguagem e assim, meu browser não me mostra nada! Será que devo utilizar algum outro?

  • AlexandreAlexandre

    Cavas muito bom vó largar o flex de vez!

  • MauricioMauricio

    Para funcionar no Firefox 16 foi necessário especificar o tipo de script na tag <script>, deste modo:
    <script type="text/javascript">
    Sem isso, não funcionou.
    Também não dá para esquecer de substituir as aspas inclinadas por caracteres ASCII.

    Meu código funcionou assim:
    <canvas id="x" width="300" height="300"></canvas>
    <script type="text/javascript">
    function desenhar(){
    // Obtemos o contexto
    context=document.getElementById('x').getContext('2d');
    //Iniciamos um novo desenho
    context.beginPath();
    //Movemos a caneta para o inicio do desenho
    context.moveTo(150,50);
    //Desenhamos as linhas
    context.lineTo(220,250);
    context.lineTo(50,125);
    context.lineTo(250,125);
    context.lineTo(80,250);
    context.lineTo(150,50);
    //O desenho não é de verdade enquanto você
    //não mandar o contexto pintá-lo.
    //Vamos pintar o interior de amarelo
    context.fillStyle='#ff0';
    context.fill();
    //Vamos pintar as linhas de vermelho.
    context.strokeStyle='#f00';
    context.stroke();
    }
    </script>

  • show

  • Giovanni AmorimGiovanni Amorim

    Nada disso funcionou comigo!

  • ElianaEliana

    Nada funcionou comigo também.

  • RonaldoRonaldo

    Acho que poderiam postar quais navegadores funcionam em qual aula...

    Microsoft o IE 9 não funciona isso! Aceitem por favor :/

  • JonatasJonatas

    Não funcionou em nenhum dos códigos. Sem a especificação de script apenas aparece o botão desenhar, mas quando clico não mostra nada. Ao especificar como javascript, não mostra nada...

  • Fabricio DupinFabricio Dupin

    Agora sim com a declaração do text/javascript e a correção das aspas

    Segue o código

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Canvas API</title>
    </head>
    <body>
    <canvas id="x" width="300" height="300"></canvas>
    <button onclick="desenhar()">desenhar</button>
    <script type="text/javascript">
    function desenhar(){
    // Obtemos o contexto
    context=document.getElementById('x').getContext('2d')
    //Iniciamos um novo desenho
    context.beginPath()
    //Movemos a caneta para o inicio do desenho
    context.moveTo(150,50)
    //Desenhamos as linhas
    context.lineTo(220,250)
    context.lineTo(50,125)
    context.lineTo(250,125)
    context.lineTo(80,250)
    context.lineTo(150,50)
    //O desenho não é de verdade enquanto você
    //não mandar o contexto pintá-lo.
    //Vamos pintar o interior de amarelo
    context.fillStyle='#ff0'
    context.fill()
    //Vamos pintar as linhas de vermelho.
    context.strokeStyle='#f00'
    context.stroke()
    }
    </script>
    </body>
    </html>

  • Basta trocar as aspas e o código funciona. Não é necessário o uso do script "<script type="text/javascript">"

     

  • Thadeu EstevesThadeu Esteves

    Com certeza , canvas é bem melhor!!!

  • alexsandroalexsandro

    viva canvas _o/ muito show

  • CarlosSmpCarlosSmp

    Legal como faríamos pra permitir desenho livre como no paint?
    alguém sabe ou seja desenhar com o mouse na tela...

  • NovattuNovattu

    FAIL de novo !!

  • LucasLucas

    IE? =/

  • gilsongilson

    show de bola

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.