O que é Canvas HTML5?
HTML5 trouxe diversas novas tags, além das novidades nas tags input de formulário e das tags semânticas como article e section, uma das grandes mudanças implementadas foi a tag canvas.
Canvas é uma nova tag que permite você trabalhar e manipular elementos gráficos (raster). A tag canvas é um "board" de desenho no HTML, nele você pode desenhar linhas, elementos, manipular pixel a pixel, carregar e manipular imagens externas (rotacionar, alterar cor, brilho, etc.).
É uma evolução gigante pois permite a manipulação em tempo real do que está sendo impresso como imagem no computador do cliente.
Um exemplo de uso são jogos, gráficos e interfaces ainda mais interativas.
Quais navegadores dão suporte ao Canvas?
Praticamente todos os navegadores modernos dão suporte ao Canvas. Confira a tabela abaixo:
| IE | Firefox | Chrome | ||
|---|---|---|---|---|
| 14 versions back | 4.0: Supported | |||
| 13 versions back | 5.0: Supported | |||
| 12 versions back | 2.0: Supported | 6.0: Supported | ||
| 11 versions back | 3.0: Supported | 7.0: Supported | ||
| 10 versions back | 3.5: Supported | 8.0: Supported | ||
| 9 versions back | 3.6: Supported | 9.0: Supported | ||
| 8 versions back | 4.0: Supported | 10.0: Supported | ||
| 7 versions back | 5.0: Supported | 11.0: Supported | ||
| 6 versions back | 6.0: Supported | 12.0: Supported | ||
| 5 versions back | 7.0: Supported | 13.0: Supported | ||
| 4 versions back | 5.5: Not supported | 8.0: Supported | 14.0: Supported | |
| 3 versions back | 6.0: Not supported (but has polyfill available) | 9.0: Supported | 15.0: Supported | |
| 2 versions back | 7.0: Not supported (but has polyfill available) | 10.0: Supported | 16.0: Supported | |
| Previous version | 8.0: Not supported (but has polyfill available) | 11.0: Supported | 17.0: Supported | 3.0: Supported |
| Current | 9.0: Supported | 12.0: Supported | 18.0: Supported | |
| Near future | 10.0: Supported | 13.0: Supported | 19.0: Supported | |
| Farther future | 14.0: Supported | 20.0: Supported |
Veja a tabela completa e atualizada no Can I Use
Entendendo melhor o canvas
Neste tutorial inicial vou explicar alguns métodos do canvas e seu funcionamento. O elemento canvas é todo manipulado por javascript, e trabalha com contextos. Pelo javascript você terá acesso a diversos métodos para desenhar nesta tela, no contexto 2D você utiliza um plano cartesiano (x e y) para definir a posição de onde vai trabalhar, e através de métodos específicos pode traçar formas, linhas e definir tamanhos e cores utilizadas.
Para fazer uma animação por exemplo, você faz o seu primeiro desenho e através do javascript define um time que irá limpar o seu contexto e redesenhar os objetos em sua nova posição. Isso também server para jogos em HTML5 ou interação com o usuário: quando acontecer a interaçãovocê limpa o contexto e redesenha sua cena com os objetos manipulados em suas novas posições.
Vamos a prática!
Programando para Canvas
Coloque o elemento canvas no seu HTML e use um identificador para facilitar a manipulação do javascript.
<canvas id="myCanvas"></canvas>
Vamos agora selecionar o nosso canvas e definir o contexto em que iremos trabalhar, aqui já entra o javascript:
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
};
Isso defina que vamos trabalhar com o contexto 2D do canvas.
Desenhando uma linha com Canvas
Agora que você já tem o seu contexto definido, vamos desenhar uma linha no nosso gráfico, no javascript:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 150); //define o ponto inicial do desenho
context.lineTo(450, 50); //define a posição de in
context.lineWidth = 5; // define a largura da linha
context.strokeStyle = "#ff0000"; //define a cor da linha
context.stroke();
Pronto, temos uma linha que começa no ponto (100,150) e vai até (450,50).
Desenhando um retângulo com canvas
Agora vamos desenhar um retângulo em nosso canvas, para isso no javascript temos o método rect, que funciona da seguinte forma:
context.rect(x, y, width, height);
O exemplo do código completo:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100); // desenha o retângulo
context.fillStyle = '#8ED6FF'; // define o preenchimento do retângulo
context.fill(); // Preenche o retângulo
context.lineWidth = 5; // define a largura da linha do contorno
context.strokeStyle = 'black'; // define a cor do contorno
context.stroke(); // desenha o contorno
Desenhando um círculo com canvas
Para desenhar círculos (e arcos) temos o método arc, que funciona da seguinte forma:
context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
No exemplo acima podemos desenhar arco com qualquer angulo de início e fim, para desenhar círculos completos podemos usar o seguinte:
context.arc(x, y, radius, 0 , 2 * Math.PI, false);
Fica mais fácil e temos que nos preocupar apenas com o ponto cartesiano (x,y) e com o tamanho do raio do círculo. Abaixo um exemplo completo:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2; // pega o centro do canvas (x)
var centerY = canvas.height / 2; // pega o centro do canvas (y)
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); // desenha o círculo no centro do canvas com raio = 70
context.fillStyle = "#8ED6FF"; // define a cor de preenchimento
context.fill(); // desenha o preenchimento
context.lineWidth = 5; // define a expessura da borda
context.strokeStyle = "black"; // define a cor da borda
context.stroke(); // desenha a borda
Esse é um tutorial introdutório ao Canvas, ele parece mais complicado do que realmente é. Para entender um pouco melhor o funcionamento do canvas e suas animações criei um Pong em HTML5 Canvas, mas ainda não tive tempo de finalizar. O código está com a leitura fácil, vale a pena a leitura. 😉
Recomendo a leitura (em inglês) do html5 canvas tutorials, de onde os exemplos deste post foram retirados.
Este post te ajudou de alguma forma? Retribua, divulgue o link deste artigo em seu blog, twitter ou facebook e nos ajude a compartilhar conhecimento.