HTML5 - Guia do desenvolvedor para o HTML5 Canvas

Melcolm Sheridan

Março 2013

Sem dúvida, o elemento canvas no HTML5 é o recurso que a maioria dos desenvolvedores vai querer usar para desenvolver aplicativos Web realmente ricos – sem precisarem instalar plug-ins de navegador como Flash Player da Adobe. O Canvas nasceu em uma época em que a riqueza do cliente está no foco dos desenvolvedores. Navegadores modernos como o Chrome, Firefox e o Internet Explorer 9 e 10 o suportam. Mas o que exatamente é o elemento canvas em HTML5? Como você o usa para criar aplicativos Web ricos?

Se você não tiver familiaridade com HTML5, antes de se aprofundar neste artigo, deve ler Sim, você pode usar HTML5 hoje! e HTML5 e formas ainda mais extravagantes.

Para que serve o elemento canvas?

Oficialmente, o canvas é “uma tela de bitmap dependente de resolução que pode ser usada para a renderização de elementos gráficos ou outras imagens visuais rapidamente”. Em termos leigos, o canvas é um elemento novo em HTML5, que permite que se desenhem elementos gráficos usando JavaScript. Ele pode ser usado para renderizar texto, imagens, gráficos, linhas gradientes e outros efeitos dinamicamente. Desenhar na tela se dá através da API de tela 2D. Essa API contém uma variedade de funções que fornecem o poder de se desenhar praticamente o que se queira na tela. Atualmente, a tela suporta uma interface 2D, não 3D. Então, qual é a aparência de uma tela? Com nada. Veja você mesmo.

<canvas id=”myCanvas” style=”width:300px; height:300px”></canvas>

O código acima renderiza uma tela no navegador, mas como a tela está vazia, você não verá nada. Vamos adicionar uma borda para vê-la com mais clareza. A imagem abaixo mostra a tela com uma borda preta.

Dn151487.54A4388C38282CF6771560B204AED2FA(pt-br,MSDN.10).png

Ainda não muito empolgante, mas isso vai mudar quanto mais adiante você ler! Uma página da Web pode ter vários elementos canvas. Individualizar cada tela por ID dá a você o poder de visar uma tela específica através de JavaScript. Para desenhar em uma tela, você precisa fazer referência ao contexto dela. O contexto fornece a você acesso às propriedades e métodos 2D que permitem desenhar e manipular imagens em um elemento canvas. Vamos nos aprofundar mais no contexto posteriormente.

Todo elemento canvas têm coordenadas x e y, sendo x a coordenada horizontal e y a vertical. A imagem a seguir mostra essas coordenadas em uma tela.

Dn151487.A1F7072B78C3976096D383F0B1ABDAA0(pt-br,MSDN.10).png

Vou me concentrar mais no contexto mais adiante.

Esclarecimento da relação SVG-Canvas

É importante entender as diferenças entre o SVG e elementos canvas. O SVG é um formato de elementos gráficos vetoriais baseados em XML. Você pode adicionar estilos a ele com CSS e também comportamento dinâmico usando o SVG DOM. A tela permite que se desenhem elementos gráficos e formas através de JavaScript. Também pode ser estilizada e você pode adicionar comportamento dinâmico a ela. Aqui estão alguns motivos para se usar o Canvas em vez do SVG.

  • a tela é mais rápida para se desenharem elementos gráficos complexos
  • você pode salvar imagens fora da tela, enquanto não consegue usando o SVG
  • todo no Canvas é um pixel.

Por outro lado, o SVG também tem algumas vantagens.

  • não depende da resolução, então pode ser dimensionado para diferentes resoluções de tela
  • é XML, então é facílimo visar elementos diferentes
  • é bom em animações complexas

Então, por que usar um em vez do outro? Bem, se o seu site é dependente da resolução, altamente interativo e você quer edição de imagens vetoriais, escolha o SVG. Por outro lado, se estiver desenvolvendo um jogo e quiser renderizar elementos gráficos de forma realmente rápida ou não quiser lidar com XML, escolha o Canvas. Em um mundo ideal eles trabalhariam juntos para complementar um ao outro.

Para ficar mais avançado na escolha entre SVG e Canvas, leia este blog.

Canvas e aceleração de hardware

Usar o Canvas é simplesmente a melhor maneira de aprender sobre aceleração de hardware na Web. Em versões mais antigas de navegadores, a renderização de elementos gráficos – como a maioria das tarefas de uso intenso de computação – era tratada pela CPU, a unidade central de processamento. Navegadores modernos vêm inovando nessa área ao transferir tarefas de uso gráfico intenso para a GPU, a unidade de processamento gráfico, para renderizar os elementos gráficos e texto de uma página da Web usando Direct2D e DirectWrite. A alocação dessas tarefas para núcleos da GPU não apenas acelera o processamento de elementos gráficos, mas também facilita a carga da CPU enquanto ela cuida das tarefas seriais com mais eficiência.

O JavaScript também já foi acusado de monopolização de processamento. Um bom exemplo de se lidar com isso é o mecanismo JavaScript do IE9, o Chakra, que tira vantagem de núcleos multiprocessador para compilar JavaScript em código de máquina em segundo plano para processamento mais rápido.

Nos dois casos, o resultado final é desempenho acelerado.

Menciono isso, pois se você juntar processamento de elementos gráficos acelerado com processamento JavaScript acelerado, terá criado um ambiente ideal para tirar o máximo da tela HTML5.

Quando você comandos de desenho à tela, o navegador os envia diretamente para o hardware gráfico sem mais desenvolvimento da sua parte. A aceleração de hardware funciona incrivelmente rápido para fornecer animações e elementos gráficos interativos em tempo real, sem reduzir a velocidade da experiência de usuário que você está proporcionando.

Existe uma liberação aqui para o desenvolvedor criativo, em saber que as experiências visuais que você pode colocar em código serão convertidas e renderizadas como pretendido.

Todas as maneiras seguintes de se trabalhar com Canvas proporcionam uma experiência aprimorada, intensificada e mais prazerosa quando visualizada através de um navegador com aceleração de hardware.

API de tela 2D

A API de tela 2D é um objeto que permite desenhar e manipular imagens e elementos gráficos em um elemento canvas. Para fazer referência ao contexto da tela, você chama getContext, que é um método no elemento canvas. Ele tem um parâmetro, que atualmente é 2d. Aqui está o trecho de código para a referência ao contexto:

var myCanvas = document.getElementById(“myCanvas”);
var context = myCanvas.getContext(“2d”);

Cada tela tem seu próprio contexto, então, se a sua página contiver vários elementos canvas, você deve ter uma referência a cada contexto individual com que quiser trabalhar.

Além de getContext, há muitas outras funções à sua disposição na API de tela 2D. Algumas das notáveis estão descritas abaixo.

Funções de transformação

  • scale – permite dimensionar o contexto atual.
  • rotate – permite a rotação das coordenadas x e y do contexto atual.

Funções de estado

  • save – permite salvar o estado atual do contexto
  • restore – permite restaurar o estado do contexto a partir de um estado salvo anteriormente.

Funções de texto

  • font – apanha ou define a fonte para o contexto atual.
  • fillText – renderiza texto preenchido na tela atual.
  • measureText – mede a largura atual do texto especificado.

Como pode imaginar, há mais métodos associados à API de tela 2D. Veja esta página para métodos que não cobri nesta seção.

A tela é bastante desinteressante se você não desenhar nela, então vejamos o que você pode desenhar uma vez que tenha o contexto.

Formas e cores

Existe um grupo inteiro de propriedades e funções dedicadas a desenhar formas. Comecemos com retângulos. Aqui estão as funções relacionadas disponíveis para desenhar retângulos.

  • fillRect(x, y, w, h) – desenha o retângulo definido na tela, usando o estilo de preenchimento atual
  • strokeRect(x, y, w, h) – desenha a caixa de contorna o retângulo definido na tela, usando o traço atual
  • clearRect(x, y, w, h) – transforma todos os pixels na tela no retângulo definido em preto transparente

Para desenhar um retângulo, a maneira mais fácil é usar fillRect Isso desenha um retângulo na tela usando o fillStyle atual. Aqui está como criar um retângulo preto:

var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);
context.fillRect(5, 5, 145, 145);

O código renderizará um retângulo preto, começando a 5 pixels do topo, 5 pixels da direita e 145 pixels em largura e altura. A imagem abaixo mostra o retângulo na tela.

Dn151487.1DDE66E2614640A649D129E4E13CB1AC(pt-br,MSDN.10).png

Se você não especificar uma cor, o padrão sempre será preto. Para desenhar outro retângulo sobreposto, chame fillRect novamente com parâmetros diferentes. O fillStyle pode ser qualquer cor de CSS, então ele tira proveito da nova propriedade opacity no CSS3. O código a seguir desenha três retângulos na tela e muda a cor do mais embaixo para que fique semitransparente.

context.fillRect(5, 5, 145, 145);
context.fillStyle = “rgb(0, 162, 232)”;
context.fillRect(40, 55, 145, 145);
context.fillStyle = “rgba(255, 0, 0, 0.2)”;
context.fillRect(75, 105, 145, 145);

Aqui está o resultado:

Dn151487.F07DCCBF0628110E041E74F7422E8833(pt-br,MSDN.10).png

Desenhar círculos também é facílimo. Para desenhar um círculo, a maneira mais fácil é usar arc. Isso desenha um círculo na tela usando o fillStyle atual. A definição da função está abaixo.

  • arc(x, y, radius, startAngle, endAngle, anticlockwise) – aponta para o subcaminho de modo que o arco descrito pela circunferência do círculo descrito pelos argumentos, começando e terminando nos ângulos inicial e final definidos e indo na direção definida, seja adicionado ao caminho

Aqui está como criar um círculo preto:

context.beginPath();
context.fillStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 2 * Math.PI, true);
context.fill();

Como arc adiciona pontos no subcaminho, você deve chamar beginPath primeiro e depois fill. Isso preenche os subcaminhos com o fillStyle atual. A imagem abaixo mostra o resultado.

Dn151487.2CF2AC1B306B622193F51AE21653D0C1(pt-br,MSDN.10).png

Para desenhar o contorno de um círculo, use strokeStyle em vez de fillStyle. Depois chame stroke em vez de fill.

context.beginPath();
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 2 * Math.PI, true);
context.stroke();

Círculos não precisam ter 360 graus. Para alterar a forma, altere os raios inicial e final.

context.beginPath();
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 0.5 * Math.PI, true);
context.stroke();

Aqui está um semicírculo.

Dn151487.C5792ED2C9C7C40FC24369FA4AF8C8B8(pt-br,MSDN.10).png

Saindo de círculos e entrando em algo mais avançado, vejamos o desenho de curvas de Bezier. Essa tarefa complicada é relativamente simplificada usando a função bezierCurveTo. Isso adiciona pontos no subcaminho atual usando os pontos de controle que representam uma curva de Bezier. Os parâmetros para bezierCurveTo estão abaixo.

  • bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y) – adiciona o ponto definido no caminho atual, conectado ao anterior por uma curva de Bezier com os pontos de controle definidos

Uma curva de Bezier deve incluir três pontos. Os dois primeiro controlam o cálculo, e o terceiro ponto é o ponto final para a curva. Aqui está como criar uma curva de Bezier:

context.lineWidth = 20;
context.beginPath();
context.moveTo(5, 50);
context.bezierCurveTo(30, 30, 130, 530, 200, 100);
context.stroke();

A imagem abaixo é o que é desenhado na tela.

Dn151487.75D6EC9E170F8948BBDBEC38BF7427A8(pt-br,MSDN.10).png

Curvas de Bezier dão a você um grande poder com que desenhar. Aqui está um exemplo do desenho de um smiley em uma tela.

// face
context.beginPath();
context.lineWidth = 10;
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(200, 233, 150, 0, 2 * Math.PI, true);
context.stroke();

// color face
context.beginPath();
context.fillStyle = “rgba(80, 100, 80, 0.4)”;
context.arc(200, 233, 150, 0, 2 * Math.PI, true);
context.fill();

// right eye
context.lineWidth = 20;
context.beginPath();
context.moveTo(230, 130);
context.bezierCurveTo(230, 130, 230, 130, 240, 200);
context.stroke();

// left eye
context.beginPath();
context.moveTo(170, 130);
context.bezierCurveTo(170, 130, 170, 130, 160, 200);
context.stroke();

// upper lip
context.beginPath();
context.moveTo(100, 230);
context.bezierCurveTo(100, 230, 200, 380, 300, 230);
context.stroke();

// lower lip
context.beginPath();
context.moveTo(100, 235);
context.bezierCurveTo(105, 270, 200, 480, 300, 232);
context.stroke();

A imagem abaixo mostra o smiley.

Dn151487.E4041622D0421F05E94424E50DBD278A(pt-br,MSDN.10).png

Para complementar as formas possíveis na tela, você também pode misturar as cores como sólida, contorno, gradiente ou padrão. Usei principalmente fillStyle nos exemplos anteriores. Essa função preenche o fundo do contexto com uma cor sólida. Ele pode ter uma variedade de cores. O exemplo seguinte tornará aleatória a cor de fundo e produz um efeito de arco-íris.

var a = 1;

for (j = 0; j < 100; j++) {
var r = 255, g = 0, b = 0;

for (i = 0; i < 150; i++) {
// Yellow
if (i < 25) g += 10.2;
// Green
else if (i >= 25 && i < 50) r -= 10.2;

// Blue
else if (i >= 50 && i < 75) {
g -= 10.2;
b += 10.2;
}

// Purple
else if (i >= 75 && i < 100) r += 10.2;

// Red
else b -= 10.2;

context.fillStyle = “rgba(” + Math.floor(r) + “,” +
Math.floor(g) + “,” + Math.floor(b) + “,” + a + “)”;
context.fillRect(3 * i, 5 * j, 3, 5); } a -= 0.01; }

O efeito pode ser visto na imagem abaixo.

Dn151487.898F5FBD066B4860B5EA5293ED1C6AAA(pt-br,MSDN.10).png

Se não quiser cores sólidas, você pode usar strokeStyle e strokeRect para desenhar o contorno de um retângulo. Outro recurso de tela oferece a capacidade de se criarem gradientes. As funções relacionadas para isso estão abaixo.

  • addColorStop(offset, color) – adiciona uma interrupção da cor definida no gradiente no deslocamento definido. 0.0 é o deslocamento em uma ponta do gradiente, 1.0 é o deslocamento na ponta oposta
  • createLinearGradient(x0, y0, x1, y1) – retorna um objeto CanvasGradient que representa um gradiente linear que pinta a linha dada pelas coordenadas
  • createRadialGradient(x0, y0, r0, x1, y1, r1) – retorna um objeto CanvasGradient que representa um gradiente radial que pinta ao longo do cone dado pelos círculos representados pelas coordenadas

Um gradiente linear pode ser criado chamando createLinearGradient. Para adicionar cor ao gradiente, você chama addColorStop. Chamar isso adiciona a cor especificada nas coordenadas x e y. O exemplo a seguir demonstra um gradiente linear simples.

var gradient = context.createLinearGradient(0, 0,0, 145);
gradient.addColorStop(0, “#00ABEB”);
gradient.addColorStop(0.5, “yellow”);
gradient.addColorStop(0.8, “green”);
gradient.addColorStop(1, “white”);

context.fillStyle = gradient;
context.fillRect(5, 5, 145, 145);

Os gradientes podem ser vistos abaixo.

Dn151487.98918FE4BE18742CAEF7298231C10062(pt-br,MSDN.10).png

Há muito mais sobre gradientes que eu não cobri. Para um quadro completo, você deve visitar o site do W3C aqui.

Linhas, texto e sombras

Quando desenhar linhas, pense em caminhos. Cada tela tem um caminho. Definir um caminho é como desenhar uma linha. Qualquer linha é possível. Como quando escreve, você precisa definir um caminho e depois preenchê-lo. Aqui estão algumas das propriedades e funções relacionadas para desenhar linhas.

  • lineWidth [ = value ] – retorna a largura de linha atual. Pode ser definido para alterar a largura da linha
  • lineCap [ = value ] – retorna o estilo da borda de linha atual. Pode ser definido para alterar estilo da borda de linha. Os estilos de borda de linha possíveis são butt, round e square
  • lineJoin [ = value ] – retorna o estilo de junção de linhas Pode ser definido para alterar estilo de junção de linhas. Os estilos de junção de linhas possíveis são bevel, round e miter

Para desenhar linhas, você chama moveTo e lineTo. Essa função aceita parâmetros x e y que dizem a ela exatamente onde você quer desenhar a linha. Você pode especificar a largura da linha definindo lineWidth. Uma vez definida a linha, você precisa chamar stroke para desenhá-la.

O exemplo a seguir demonstra como desenhar uma série de linha, de grossas a finas.

for (i = 15; i > 0; i–) {
context.strokeStyle = “blue”;
context.lineWidth = i;
context.beginPath();
context.moveTo(55, 15 + (15 – i) * 24);
context.lineTo(335, 15 + (15 – i) * 24);
context.stroke();
}

O resultado está abaixo.

Dn151487.FD60B96F76A44039DA1A6A0E65582D32(pt-br,MSDN.10).png

Para deixar as linhas mais bonitas, você também pode alterar a borda, a forma do final da linha, definindo a propriedade lineCap. Para criar uma borda arredondada, posso definir a lineCap como round.

context.lineCap = “round”;

Fazer isso no exemplo desenha as linhas arredondadas.

Dn151487.03471A3FCD5ED03D9518280F1ACCEB88(pt-br,MSDN.10).png

Assim como linhas, texto é simples de desenhar em um elemento canvas. Diferentemente do texto em uma página da Web, não há modelo de caixa, o que significa que a CSS com que você tem familiaridade não está disponível. Mas você tem opções. Algumas das propriedades e funções relacionadas para desenhar texto estão abaixo.

  • font [ = value ] – retorna as definições de fonte atuais. Pode ser definido para alterar a fonte. A sintaxe é a mesma que para a propriedade ‘font’ da CSS
  • textAlign [ = value ] – retorna as definições de alinhamento do texto atuais. Pode ser definido para alterar o alinhamento. Os valores possíveis são start, end, left, right e center
  • textBaseline [ = value ] – retorna as definições de alinhamento de linha de base atuais. Pode ser definido para alterar o alinhamento da linha de base.
  • fillText(text, x, y [, maxWidth ] ) – preenche o texto na posição definida
  • strokeText(text, x, y [, maxWidth ] ) – traça o texto na posição definida

Para imprimir texto simples, use fillText. Vou definir o tamanho da fonte e o tipo usando a propriedade font.

context.font = ’24px “Tahoma”‘;
context.fillText(“Hello World!”, 0, 0);

Aqui está o resultado:

Dn151487.C194167BA13EF5EE8F0EF4B89E1BB34E(pt-br,MSDN.10).png

Para criar texto transparente, defina fillStyle.

context.fillStyle = “rgba(0, 0, 0, 0.2)”;

E o resultado:

Dn151487.990628001132954E35FE9487856BABDD(pt-br,MSDN.10).png

Adicionar efeitos como sombras também é muito fácil. O código a seguir usa os objetos de desenho de sombra para criar a sombra.

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 5;
context.shadowColor = “rgba(0, 0, 0, 1)”;

Dn151487.F2789A9F0F1BE62F6655E7C3EACC1794(pt-br,MSDN.10).png

A sombra pode ser personalizada para criar qualquer ângulo ou cor de sombra que você quiser. Demonstrei apenas uma pequena fração do que você pode fazer com texto na tela. Para mais informações a esse respeito, veja a section Texto no W3C.

Imagens e vídeo

Bem, quando se trabalha com a tela, também é possível trabalhar com imagens e vídeo. A pergunta óbvia é: por que não usar simplesmente um elemento <img> padrão? A grande vantagem é que sua imagem pode fazer parte de uma imagem muito maior e mais complexa graças a toda a magia que você pode criar com o elemento canvas. Existe uma função principal para se trabalhar com imagens e vídeos, e ela é drawImage. A porção de código a seguir se refere à imagem sheep (ovelha) e a desenha na tela.

var image = document.getElementById(“mySheep”);
context.drawImage(image, 10, 10, 128, 128);

<img id=”mySheep” src=”sheep.png” style=”display:none;” />

O código desenha a ovelha na tela.

Dn151487.6F97D31FD731C10107BB5C687AF47C48(pt-br,MSDN.10).png

A imagem pode ser invertida, desaparecer ou aparecer gradualmente ou simplesmente ser girada agora que está na tela.

Vídeos seguem um caminho semelhante. Primeiro, você precisa usar o elemento HTML5 video. Como pode imaginar, esse elemento tem uma infinidade de funcionalidades associadas, então antes de começarmos, você deve ler a respeito aqui. O elemento video por si só não é muito interessante. Ele contém um atributo controls, que determina se o navegador deve exibir o conjunto padrão de controles de vídeo, e loop, que diz ao navegador se o vídeo é recursivo. Dentro do elemento video você especifica três filhos, cada qual com o mesmo vídeo, mas com formatos diferentes. Nenhuma novidade nisso, mas quando você une o elemento vídeo com a tela... bem, pode inventar coisas surpreendentes.

Primeiro vou adicionar a tela e o vídeo HTML

<canvas id=”myCanvas”> </canvas>
<video id=”myVideo” controls loop>
<source src=”video.webm” type=”video/webm”>
<source src=”video.ogg” type=”video/ogg”>
<source src=”video.mp4″ type=”video/mp4″>
</video>

Nada demais acontecendo aqui. O vídeo será reproduzido dentro da marca video, mas vou desenhar o vídeo na tela e posicioná-lo centralizado ali. O resultado é impressionante. Aqui está o código.

var canvas = function () {
return {
draw: function () {
var video = document.getElementById(“myVideo”);
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);

var width = Math.floor(canvas.clientWidth / 100);
var height = Math.floor(canvas.clientHeight / 100);

canvas.width = width; canvas.height = height;

video.play();
context.drawImage(video, 0, 0, width, height);
},
init: function () {
setInterval(canvas.draw, 16);

}

}

} ();

O truque para fazer isso funcionar é desenhar o vídeo de forma recorrente na tela, caso contrário ele será desenhado apenas uma vez, e isso seria terrível. Por isso setInterval é chamado quando a página carrega.

Transformações e animações

Transformações e animações são possíveis com o elemento canvas. Aqui estão algumas das propriedades e funções relacionadas para a execução de transformações.

  • scale(x, y) – altera a matriz de transformação para aplicar uma transformação de dimensionamento com as características definidas
  • rotate(angle) – altera a matriz de transformação para aplicar uma transformação de rotação com as características definidas
  • translate(x, y) – altera a matriz de transformação para aplicar uma transformação de translação com as características definidas
  • transform(m11, m12, m21, m22, dx, dy) – altera a matriz de transformação para aplicar matriz definida pelos argumentos
  • transform(m11, m12, m21, m22, dx, dy) – altera a matriz de transformação para a matriz definida pelos argumentos

Transformações e animações podem trabalhar separadamente, mas quando você as combina, como demonstrarei agora, elas podem causar uma poderosa impressão visual. Comecemos com rotação. Para girar o contexto, defina um ângulo e ele girará na tela. O exemplo a seguir desenha um retângulo a cada 250 milésimos de segundo e cada um deles é girado, então o efeito é como uma roda se movendo. As cores também são aleatórias para produzir um efeito brilhante.

var can = function () {
var canvas;
var context;

return {
draw: function () {
var r = Math.floor(Math.random() * 255) + 70;
var g = Math.floor(Math.random() * 255) + 70;
var b = Math.floor(Math.random() * 255) + 70;
var s = ‘rgba(‘ + r + ‘,’ + g + ‘,’ + b + ‘, 0.5)’;

context.rotate(0.2 * Math.PI);
context.fillStyle = s;
context.fillRect(10, 0, 150, 50);
},
init: function () {
canvas = document.getElementById(“myCanvas”);
context = canvas.getContext(“2d”);
context.translate(200, 250);
setInterval(can.draw, 250);
}
}
} ();

window.onload = can.init;

A imagem abaixo mostra o resultado.

Dn151487.BBBC0E2D78D449ADE9A1843973B088A7(pt-br,MSDN.10).png

Dimensionar elementos da tela também é fácil. Vou ficar com a demonstração anterior, exceto para rotação; vou dimensionar cada retângulo a cada segundo. Aqui está o código.

var can = function () {
var canvas;
var context;
var x = 0;
var y = 0;

function currectX() {
return x = x + 1;
}

function currectY() {
return y = y + 1;
}

return {
draw: function () {
var r = Math.floor(Math.random() * 255) + 70;
var g = Math.floor(Math.random() * 255) + 70;
var b = Math.floor(Math.random() * 255) + 70;
var s = ‘rgba(‘ + r + ‘,’ + g + ‘,’ + b + ‘, 0.5)’;

context.fillStyle = s;
context.scale(1.2,1.2);
context.fillRect(currectX(), currectY(), 5, 5);
},
init: function () {
canvas = document.getElementById(“myCanvas”);
context = canvas.getContext(“2d”);
context.translate(0, 0);
setInterval(can.draw, 1000);
}
}
} ();

window.onload = can.init;

A imagem abaixo mostra o resultado.

Dn151487.A7DB7FCCDD924EF03385BE59D4F4E035(pt-br,MSDN.10).png

Como pode imaginar, esse é apenas um ponto de partida para transformações e animações. Para uma animação complexa, você pode dar uma olhada em Brilliant Lines, criado pelo grupo W3C. Ele pode ser encontrado aqui. Encontre mais informações sobre transformações aqui.

Trabalhe com o mouse

Como já pode ter adivinhado, também é possível trabalhar com o mouse. Como qualquer elemento em uma página da Web, você pode retornar as coordenadas x e y do mouse consultando as propriedades pageX e pageY do elemento. Aqui está o trecho de código para rastrear o mouse sobre uma tela.

var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);

canvas.onmousemove = function (e) {
var x = e.pageX – this.offsetLeft;
var y = e.pageY – this.offsetTop;

var div = document.getElementById(“coords”);
div.innerHTML = “x: ” + x + ” y: ” + y;
};

No código acima, associei um elemento para capturar o movimento do mouse, então quando ele se move as coordenadas x e y são exibidas na tela. Perfeito e simples. Para algo um pouco mais avançado, eu quis fazer a tela se comportar como um pedaço de papel, oferecendo assim a capacidade de desenhar nela. Bem, o código para fazer isso não é muito complexo. Aqui está o código todo.

var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);

context.fillCircle = function (x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};

context.clearTo = function (fillColor) {
context.fillStyle = fillColor;
context.fillRect(0, 0, canvas.width, canvas.height);
};

context.clearTo(“#ddd”);
canvas.onmousemove = function (e) {
if (!canvas.isDrawing) return;
var x = e.pageX – this.offsetLeft;
var y = e.pageY – this.offsetTop;

var div = document.getElementById(“coords”);
div.innerHTML = “x: ” + x + ” y: ” + y;
var radius = 10;
var fillColor = ‘#ff0000′;
context.fillCircle(x, y, radius, fillColor);
};

canvas.onmousedown = function (e) {
canvas.isDrawing = true;
};
canvas.onmouseup = function (e) {
canvas.isDrawing = false;
};

Graças ao JavaScript, posso estender facilmente o elemento canvas e acrescentar alguns manipuladores de evento personalizados para lidar com o movimento do mouse.

Parceiro de conteúdo SitePoint

Este tutorial foi possibilitado pelo suporte da Microsoft. Em cooperação com a Microsoft e escrito de forma independente pelo SitePoint, nos esforçamos para trabalhar juntos para desenvolver o conteúdo que é mais útil e relevante para você.

E essa é a beleza do elemento canvas: há tanto que você pode experimentar.

Este foi um tour-relâmpago, e espero que o tenha entusiasmado para trabalhar com o elemento canvas, sabendo agora que esses efeitos extraordinários são totalmente viáveis em navegadores modernos.

Quer saber mais? Experimente estes links:

Mostrar: