Blog Post

HTML5 - Canvas API

Sign in to queue

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

Add Your 2 Cents