Blog Post

HTML5 - Canvas API

Description

Generic Episode Image

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:

Generic Episode Image

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

 

The Discussion

  • User profile image
    Elton777

    Show!

     

  • User profile image
    ORlando

    muito louco esse canvas!

  • User profile image
    Leonardo​Almeida

    O Canvas é bem melhor q o anterior 

  • User profile image
    Ademilson

    Canvas \o/

  • User profile image
    Wellington 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?

  • User profile image
    Alexandre

    Cavas muito bom vó largar o flex de vez!

  • User profile image
    Mauricio

    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>

  • User profile image
    Ruggeri

    show

  • User profile image
    Giovanni Amorim

    Nada disso funcionou comigo!

  • User profile image
    Eliana

    Nada funcionou comigo também.

  • User profile image
    Ronaldo

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

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

  • User profile image
    Jonatas

    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...

  • User profile image
    Fabricio 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>

  • User profile image
    markosfox1

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

     

  • User profile image
    Thadeu Esteves

    Com certeza , canvas é bem melhor!!!

  • User profile image
    alexsandro

    viva canvas _o/ muito show

  • User profile image
    CarlosSmp

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

  • User profile image
    Novattu

    FAIL de novo !!

  • User profile image
    Lucas

    IE? =/

  • User profile image
    gilson

    show de bola

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.