Guia do elemento Canvas do HTML5 para desenvo

De Malcolm Sheridan

Guia do elemento Canvas do HTML5 para desenvolvedores

Sem dúvida, o elemento canvas do HTML5 é o recurso que a maioria dos desenvolvedores vai querer usar para desenvolver aplicações web verdadeiramente avançadas – sem precisar instalar plug-ins de navegador como o Adobe Flash Player. Clientes avançados são a prioridade dos desenvolvedores no momento, e a criação do canvas está relacionada a essa tendência. Todos os navegadores modernos, como o Chrome, o Firefox e o Internet Explorer 9 e 10, têm suporte para ele. Mas o que é exatamente o elemento canvas do HTML5? Como você pode usá-lo para criar aplicações web avançadas?

Se você ainda não se familiarizou com o HTML5, antes de se aprofundar neste arquivo, leia Yes, You Can Use HTML5 Today! (Sim, você pode usar o HTML5 hoje!) e HTML5 and Even Fancier Forms (HTML5 e formulários ainda melhores).

Para que serve o elemento canvas?

Oficialmente, o canvas é “uma tela de bitmap dependente de resolução que pode ser usada para renderizar gráficos, animações de jogos e outras imagens visuais em tempo real”. Em termos leigos, o canvas é um novo elemento do HTML5 que permite desenhar gráficos usando o JavaScript. Pode ser usado para renderizar textos, imagens, gráficos, retângulos, linhas, gradientes e outros efeitos de forma dinâmica. O desenho é feito através da API 2D do canvas. Essa API contém inúmeras funções que permitem desenhar praticamente qualquer coisa na tela. Atualmente, o canvas tem suporte para superfícies 2D, não 3D. Como é o canvas? Nada de mais. Veja você mesmo.


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

O código acima renderiza um canvas no navegador, mas como ele está vazio, você não vai ver nada. Vamos adicionar uma borda para que você veja melhor. A imagem abaixo mostra o canvas com uma borda preta.

blank canvas

Ainda não é nada empolgante, mas isso vai mudar, continue lendo! Uma página web pode ter vários elementos canvas. Se tiverem IDs individuais, você pode direcionar o desenho a um canvas específico através do JavaScript. Para desenhar, você precisa fazer referência ao contexto do canvas. O contexto dá acesso aos métodos e propriedades 2D que permitem desenhar e manipular imagens em um elemento canvas. Vamos falar sobre isso mais adiante. Todo elemento canvas tem coordenadas x e y; "x" é a coordenada horizontal e "y" é a vertical. A imagem a seguir mostra essas coordenadas em um canvas.

canvas coordinates

Vou falar sobre o contexto daqui a pouco.

Esclarecendo a relação SVG - Canvas

É importante entender as diferenças entre os elementos canvas e SVG. SVG é um formato de gráficos de vetor baseado em XML. Você pode adicionar estilos a ele com CSS e comportamentos dinâmicos através do SVG DOM. Com o canvas, é possível desenhar gráficos e formas através do JavaScript. Ele também possibilita a adição de estilos e comportamentos dinâmicos. Veja por que é melhor usar o canvas em vez do SVG.

  • o canvas é mais rápido no desenho de gráficos complexos
  • você pode salvar imagens fora do canvas, o que não é possível no SVG
  • tudo no canvas é um pixel.

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

  • é independente de resolução, portanto pode escalar conforme a resolução da tela
  • é xml, por isso é fácil visar vários elementos
  • é bom em animações complexas

Então qual escolher? Se seu site é dependente de resolução, altamente interativo e você quer edição de imagens de vetor, escolha o SVG. Mas se você estiver desenvolvendo um jogo e quiser renderizar gráficos bem mais rápido, ou não quiser mexer com XML, escolha o canvas. Em um mundo ideal, eles funcionariam juntos e se complementariam.

Para saber mais sobre o SVG e o Canvas, leia este blog.

Canvas e aceleração de hardware

Usar o canvas é a melhor forma de aprender sobre a aceleração de hardware na web. Nas versões anteriores dos navegadores, a renderização de gráficos – como a maioria das tarefas que faziam uso intenso de computação – era realizada pela CPU, a unidade de processamento central. Os navegadores modernos têm inovado nessa área usando a GPU (graphics processing unit - unidade de processamento de gráficos) para renderizar gráficos e textos em páginas web por meio do Direct2D e do DirectWrite. A alocação dessas tarefas nos núcleos da GPU não só acelera o processamento dos gráficos como diminui a carga da CPU, que pode cuidar das tarefas seriais com mais eficiência.

O JavaScript também já foi acusado de monopolizar o processamento. Um bom exemplo de como lidar com isso é o mecanismo de JavaScript do IE9, Chakra, que usa núcleos multiprocessador para compilar o JavaScript em segundo plano e convertê-lo em código de máquina, acelerando o processamento.

Em ambos os casos, o resultado final é a aceleração do desempenho.

Menciono isso aqui porque, acelerando o processamento de gráficos e o processamento de JavaScript, criamos um ambiente ideal para aproveitar ao máximo o canvas do HTML5.

Quando enviamos comandos de desenho ao canvas, o navegador os envia diretamente ao hardware de gráficos sem que tenhamos que desenvolver mais nada. O hardware funciona incrivelmente rápido para fornecer animações e gráficos interativos em tempo real, sem tornar lenta a experiência de usuário que você está proporcionando. Você pode testar vários navegadores e seus níveis de suporte à aceleração de hardware aqui.

É uma libertação para o desenvolvedor criativo, que sabe que as experiências visuais colocadas no código serão traduzidas e renderizadas da forma esperada.

Todas as formas de trabalhar com o canvas que apresentamos a seguir fornecem uma experiência aprimorada, intensificada e mais agradável quando vista através de um navegador de hardware acelerado.

API 2D do canvas

A API 2D é um objeto que permite desenhar e manipular imagens e gráficos em um elemento canvas. Para fazer referência ao contexto do canvas, chamamos o getContext, que é um método do elemento canvas. Ele tem um único parâmetro, que atualmente é o 2d. Este é o trecho de código para fazer referência ao contexto.


	var myCanvas = document.getElementById(“myCanvas”);

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

Cada canvas tem seu próprio contexto, portanto se sua página tiver vários elementos canvas, faça uma referência individual a cada contexto com o qual quiser trabalhar.

Além do getContext, há várias outras funções à sua disposição na API 2D do canvas. Algumas das mais importantes estão descritas abaixo.

Funções de transformação

  • scale – para escalonar o contexto atual.
  • rotate – para girar as coordenadas x e y do contexto atual.

Funções de estado

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

Funções de texto

  • font – obtém ou define a fonte do contexto atual.
  • fillText – renderiza o texto preenchido no canvas atual.
  • measureText – mede a largura atual do texto especificado.

Como você deve imaginar, há mais métodos anexados à API 2D do canvas. Visite esta página para conhecer os métodos não mencionados nesta seção.

O canvas é bastante tedioso se não desenharmos nele, por isso vamos ver o que pode ser desenhado quando temos o contexto.

Formas e cores

Existe um grupo grande de propriedades e funções voltadas ao desenho de formas. Vamos começar com os retângulos. Estas são as funções disponíveis para desenhar retângulos.

  • fillRect(x, y, w, h) – desenha o retângulo na tela usando o estilo de preenchimento atual
  • strokeRect(x, y, w, h) – desenha a caixa que contorna o retângulo usando o estilo de traço atual
  • clearRect(x, y, w, h) – limpa todos os pixels dentro do retângulo deixando-o preto

A forma mais fácil de desenhar um retângulo é com o fillRect. Ele desenha o retângulo na tela usando o estilo de preenchimento (fillStyle) atual. Veja como criar um retângulo preto.


var canvas = document.getElementById(“myCanvas”);

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

context.fillRect(5, 5, 145, 145);

Esse código renderiza um retângulo preto, começando 5 pixels do topo e 5 pixels da direita e com 145 pixels de largura e altura. A imagem abaixo mostra o retângulo na tela.

black rectangle

Se você não especificar a cor, o padrão será sempre preto. Para desenhar outro retângulo em cima, chame o fillRect novamente com parâmetros diferentes. O fillStyle pode ser de qualquer cor do CSS, portanto podemos usar a nova propriedade deopacidade do CSS3. O código a seguir desenha três retângulos na tela e muda a cor do de baixo 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);

Este é o resultado.

three rectangles

Desenhar círculos também é simples. A forma mais fácil é com o arc. Ele 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 para que o arco descrito pela circunferência do círculo descrito pelos argumentos, começando no ângulo inicial dado e terminando no ângulo final dado, indo na direção dada, seja adicionado ao caminho

Veja 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 o arco aponta para o subcaminho, temos que chamar o beginPathprimeiro e depois o fill Assim, os subcaminhos são preenchidos com o fillStyle atual. A imagem abaixo mostra o resultado.

circle

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


context.beginPath();

context.strokeStyle = “rgb(0, 0, 0)”;

context.arc(123, 93, 70, 0, 2 * Math.PI, true);

context.stroke();

Os círculos não precisam ter 360 graus. Para alterar o formato, mude o raio inicial e final.


context.beginPath();

context.strokeStyle = “rgb(0, 0, 0)”;

context.arc(123, 93, 70, 0, 0.5 * Math.PI, true);

context.stroke();

Este é o semicírculo.

semicircle

Passando dos círculos para algo mais avançado, vamos ver como desenhar curvas de Bézier. Essa tarefa difícil é relativamente simplificada pela função bezierCurveTo. Ela adiciona pontos ao subcaminho atual usando os pontos de controle que representam uma curva de Bézier. Estes são os parâmetros do bezierCurveTo.

  • bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y) – adiciona o ponto dado ao caminho atual, conectando-o ao anterior por uma curva de Bézier cúbica com os pontos de controle dados

A curva de Bézier deve incluir três pontos. Os dois primeiros controlam o cálculo, e o terceiro é o ponto final da curva. Veja como criar uma curva de Bézier simples.


context.lineWidth = 20;

context.beginPath();

context.moveTo(5, 50);

context.bezierCurveTo(30, 30, 130, 530, 200, 100);

context.stroke();

A imagem abaixo mostra o desenho feito na tela.

Bezier curve

As curvas de Bézier aumentam muito a capacidade de desenho. Este é um exemplo avançado do desenho de um "smiley" (rosto sorridente) na 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 rosto sorridente.

smiley face

Para complementar a capacidade de formas do canvas, você pode misturar as cores usando cores sólidas, contornos, gradientes ou padrões. Eu usei o fillStyle em quase todos os exemplos anteriores. Essa função preenche o fundo do contexto com uma cor sólida. Pode ser uma infinidade de cores. O exemplo a seguir seleciona as cores do fundo aleatoriamente 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.

gradients

Se não quiser cores sólidas, você pode usar o strokeStyle e o strokeRect para desenhar o contorno de um retângulo. Outro recurso do canvas oferece a capacidade de criar gradientes. Estas são as funções relacionadas.

  • addColorStop(offset, color) – adiciona ao gradiente, no deslocamento dado, um "color stop" (interrupção de cor) com a cor dada. 0.0 é o deslocamento em uma extremidade do gradiente e 1.0 é o deslocamento na extremidade oposta
  • createLinearGradient(x0, y0, x1, y1) – retorna um objeto CanvasGradient como um gradiente linear que pinta toda a linha dada pelas coordenadas
  • createRadialGradient(x0, y0, r0, x1, y1, r1) – retorna um objeto CanvasGradient como um gradiente radial que pinta todo o cone dado pelos círculos representados pelas coordenadas

Para criar um gradiente linear, basa chamar o createLinearGradient. Para adicionar cores ao gradiente, chame addColorStop. Essa função adiciona a cor especificada nas coordenadas x e y. O exemplo a seguir mostra 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.

linear gradients

Há muito mais coisas sobre os gradientes que eu não comentei. Para mais informações, consulte o site do W3C aqui.

Linhas, textos e sombras

Quando estiver desenhando linhas, pense em caminhos. Cada canvas tem um caminho. Definir um caminho é como desenhar uma linha. Qualquer linha é possível. Como na escrita, é necessário definir um caminho e preenchê-lo. Estas são algumas das propriedades e funções relacionadas ao desenho de linhas.

  • lineWidth [ = value ] – retorna a largura atual da linha. Pode ser usada para alterar a largura da linha
  • lineCap [ = value ] – retorna o estilo atual das extremidades da linha. Pode ser usada para alterar o estilo das extremidades da linha. Existem três estilos possíveis para as extremidades da linha: "butt", "round" e "square"
  • lineJoin [ = value ] – retorna o estilo atual da junção das linhas. Pode ser usada para alterar o estilo da junção das linhas. Existem três estilos possíveis para a junção das linhas: "bevel", "round" e "miter"

Para desenhar linhas, chame as funções moveTo e lineTo. Elas aceitam parâmetros x e y, que informam exatamente onde você quer desenhar a linha. Também é possível especificar a largura da linha configurando o lineWidth. Após definir a linha, chame o stroke para desenhá-la.

O exemplo a seguir mostra como desenhar uma série de linhas, das grossas às pequenas.


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.

lines

Para dar mais vida às linhas, você pode mudar o "cap", ou seja, o formato da extremidade da linha, configurando a propriedade lineCap. Para criar uma extremidade arredondada, por exemplo, defina o lineCap como round.


context.lineCap = “round”;

Configurando a propriedade assim, você desenha linhas com extremidades arredondadas.

rounded lines

Os textos, assim como as linhas, também são simples de desenhar em um elemento canvas. Diferente do texto em uma página web, não há modelo de caixa, portanto o CSS que você conhece não está disponível. Mas há outras opções. Estas são algumas das propriedades e funções usadas para desenhar textos.

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

Para imprimir textos sem formatação, use o fillText. Vou definir o tamanho e o tipo da fonte usando a propriedade font.


context.font = ’24px “Tahoma”‘;

context.fillText(“Hello World!”, 0, 0);

Este é o resultado.

hello world

To Para criar textos transparentes, use o fillStyle.


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

Este é o resultado.

hello world transparent

Adicionar efeitos como sombras também é fácil. O código a seguir usa 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)”;

hello world shadow

A sombra pode ser personalizada com qualquer ângulo ou cor. Eu demonstrei apenas uma pequena fração do que pode ser feito com textos no canvas. Para mais informações, leia a seçãoText no W3C.

Imagens e vídeos

Também podemos trabalhar com imagens e vídeos no canvas. A pergunta óbvia é por que não usar um elemento padrão? Bem, a grande vantagem é que a sua imagem pode fazer parte de uma imagem muito maior e mais complexa, graças às possibilidades proporcionadas pelo elemento canvas. A principal função para trabalhar com imagens e vídeos é a drawImage. O código a seguir faz referência à imagem de uma 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;” />

Esse código desenha a ovelha na tela.

sheep

Agora é possível girar, inverter e aplicar fade in e fade out na imagem.

Os vídeos seguem um caminho similar. Primeiro temos que usar o elemento video do HTML5. Como você pode imaginar, existem inúmeras funcionalidades associadas a esse elemento, portanto, antes de começarmos, leia sobre elas aqui. Sozinho, o elemento vídeo não é tão interessante. Ele contém um atributo de controles, que determina se o navegador deve exibir o conjunto padrão de controles de vídeo, e o loop, que informa ao navegador se o vídeo é recursivo. Dentro do elemento video, especificamos três filhos, todos com o mesmo vídeo mas com formatos diferentes. Nenhuma novidade até aqui, mas quando juntamos o elemento video com o canvas... bom, aí podemos fazer coisas incríveis.

Primeiro, vou adicionar os elementos canvas e video.


<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 de mais está acontecendo. O vídeo é reproduzido dentro da marca video, mas eu vou desenhá-lo e centralizá-lo na tela. O resultado é impressionante. Este é 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 segredo para fazer isso funcionar é desenhar o vídeo recursivamente na tela, senão ele será desenhado apenas uma vez, o que não seria nada legal. É por isso que o setInterval é chamado quando a página carrega. A reprodução do vídeo pode ser vista aqui.

Transformações e animações

Com o elemento canvas, é possível fazer transformações e animações. Estas são algumas das propriedades e funções usadas para realizar transformações.

  • scale(x, y) – muda a matriz para aplicar uma transformação em escala com as características
  • rotate(angle) – muda a matriz para aplicar uma transformação em rotação com as características dadas
  • translate(x, y) – muda a matriz para aplicar uma transformação em translação com as características dadas
  • transform(m11, m12, m21, m22, dx, dy) – altera a matriz para aplicar a matriz dada pelos argumentos
  • setTransform(m11, m12, m21, m22, dx, dy) – altera a matriz para a matriz dada pelos argumentos.

As transformações e animações podem funcionar separadamente, mas combinadas, como vou demonstrar agora, elas geram resultados visuais poderosos. Vamos começar com a rotação. Inclua um ângulo para que o contexto gire na tela. O exemplo a seguir desenha um retângulo a cada 250 milissegundos e todos são girados, portanto o efeito é como uma roda de fiar. As cores 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.

spinning wheel

A imagem parada não favorece a demonstração – veja a animação funcionando aqui. Escalonar o elemento canvas também é fácil. Usando a demonstração anterior, exceto a rotação, vou escalonar os retângulos horizontalmente a cada segundo. Este é 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.

squares

Novamente, a imagem não mostra a animação – veja-a funcionando aqui. Como você pode imaginar, isso é apenas o ponto de partida das transformações e animações. Para fazer uma animação complexa, dê uma olhada no Brilliant Lines, criado pelo grupo W3C. Ele está disponível aqui. Para mais informações sobre as transformações, entre aqui.

Trabalhando com o mouse

Como você deve supor, trabalhar com o mouse também é possível. Como qualquer outro elemento em uma página web, você pode retornar as coordenadas x e y do mouse usando as propriedades pageX e pageY Para acompanhar o mouse na tela, use este trecho de código.


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, anexei um evento para capturar o movimento do mouse, portanto quando ele se mover, as coordenadas x e y serão impressas na página web. Simples e interessante. Vamos fazer algo um pouco mais avançado: quero que a tela pareça uma folha de papel para que possamos desenhar nela. O código não é muito complexo. Este é o código inteiro.


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 o elemento canvas e adicionar manipuladores de eventos personalizados para manipular o movimento do mouse. Veja a versão "dinâmica" aqui. Vá em frente, rabisque alguma coisa.

E essa é a beleza do elemento canvas: tem muita coisa que você podeexperimentar.

Nossa jornada foi rápida, mas espero que você esteja ansioso para usar o elemento canvas, agora que sabe que esses efeitos extraordinários estão disponíveis nos navegadores modernos.

Quer saber mais? Acesse estes links:

Deixe um comentário...


Outros recursos em destaque

Tweets recentes sobre o HTML5

Tópicos do HTML5 no Slashdot