HTML 5 – Parte 9 – Começando a mexer com Canvas
Olá pessoal, tudo certin?
Depois de resistir ao máximo, não tem escapatória. Hoje, vou falar sobre o Canvas!
Não pense que não gosto dos “fantabulosos” recursos gráficos do HTML5. Somente estava querendo ver o que mais, de interessante, há na especificação.
O assunto Canvas é tão denso que não conseguirei, de forma alguma, esgotar o mesmo em um post (mesmo em uma série inteira). Então, vou mostrar os temas mais básicos aqui, e ainda apresento um outro post nessa série tratando de alguns aspectos mais avançados.
Sem mais delongas..
O que já vimos?
Para você que está chegando agora, veja o que já foi abordado:
- HTML5 – Parte 8 – Messaging
- HTML5 – Parte 7 – Suporte para offline
- HTML5 – Parte 6 – Armazenando dados com Web SQL Databases
- HTML5 – Parte 5 – Armazenando dados com Web Storage
- HTML5 – Parte 4 – Vídeo e Áudio
- HTML5 – Parte 3 – Formulários
- HTML5 – Parte 2 – Semântica para todos
- HTML5 – Parte 1 – história e elementos de estrutura
Onde funciona?
O elemento Canvas é um dos mais famosos de toda a especificação do HTML5. Provavelmente por isso, é bem suportado por todos os browsers (no IE, a partir do 9 beta).
Por que Canvas é um recurso tão famoso?
Resposta simples: Porque permite que criemos páginas com efeitos realmente impressionantes com HTML e JS. Alguns exemplos que seleciono e recomendo são:
- http://mrdoob.com/projects/harmony/
- http://canvaspaint.org/
- http://www.chromeexperiments.com/detail/canvas-cycle/
- http://www.chromeexperiments.com/detail/biolab-disaster/
Todos esses exemplos são bem avançados, mas dão uma boa “ideia” de até onde podemos chegar.
O elemento <canvas>
O elemento canvas é usado como qualquer outro dentro do HTML. Basicamente, o que precisamos fazer é incluir esse elemento em nosso documento normalmente.
Como quase toda manipulação do conteúdo do Canvas é feita por JavaScript, apresento aqui um HTML básico que utilizo como “modelo” para todos os exemplos que vou apresentar por aqui. Observe:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Canvas 1</title> 5 <style> 6 canvas 7 { margin: 50px auto; 8 display: block;border: 1px solid #ccc; 9 } 10 </style> 11 </head> 12 <body> 13 <canvas id='myCanvas' height="300" width="300"></canvas> 14 <script> 15 var canvas = document.getElementById('myCanvas'); 16 var context = canvas.getContext('2d'); 17 // aqui vai o script 18 </script> 19 </body> 20 </html>
O que podemos observar nesse documento?
- Na linha 13 temos o nosso herói, o elemento canvas. Identifiquei-o com um id simples e especifiquei um tamanho;
- Na linha 15, recupero o elemento canvas;
- Na linha 16, recupero o contexto 2D, que é uma espécie de “Graphics” onde, efetivamente, emitimos todas as instruções de desenho;
- Na linha 17, indico onde devem ser “colados” os scripts aque apresentarei nos demais exemplos deste post.
Desenhando um retângulo
Vamos começar com a operação mais simples possível. Utilizando o “corpo” que já criamos vamos desenhar um retângulo. Para isso:
1 context.fillRect(5, 5, 290, 290);
Muito simples. Essa instrução tem quatro parâmetros: os dois primeiros as coordenadas (x e y, respectivamente) do canto superior esquerdo do retângulo (0,0 é o canto superior esquerdo do canvas).
Abrindo o documento resultante em um browser compatível, seu canvas será parecido com:
Legal! Vamos fazer uma coisa um “cadin” mais elaborada…
1 context.fillStyle = 'rgb(0,255,0)'; 2 context.fillRect(5, 5, 290, 290); 3 context.strokeStyle = 'rgb(255,0,0)'; 4 context.lineWidth = 5; 5 context.strokeRect(4,4,292,292)
E o resultado é:
Algumas explicações:
- o Contexto 2D opera como uma máquina de estados. Isso explica por que a definição de fillStyle e strokeStyle ocorreram separadamente das intruções de preenchimento (fill) e para borda (stroke);
- o pattern rgb(r, g, b) é bastante interessante. Como você deve saber, esse é um formato comum para especificação de uma cor, onde 0;0;0 é preto e 255;255;255 é branco.
Preenchimento gradiente
Além de cores sólidas, podemos criar composições gradientes. Há duas opções de composição: linear e radial.
Atualizando nosso exemplo para criação de um padrão gradiente linear:
1 var gradient = context.createLinearGradient( 2 0, 3 0, 4 0, 5 canvas.height 6 ); 7 8 gradient.addColorStop(0, '#ff0000'); 9 gradient.addColorStop(0.5, '#00ff00'); 10 gradient.addColorStop(1, '#0000ff'); 11 context.fillStyle = gradient; 12 13 context.fillRect(0, 0, canvas.width, canvas.height);
O documento, exibido em um browser, seria apresentado assim:
O elemento central desse efeito está no método createLinearGradient. Os quatro parâmetros são as coordenadas para o ponto inicial e final do gradiente. Para dar compreensão, basta alterar o valor na linha 4 para canvas.width para obter esse efeito:
Os “componentes” do gradiente são definidos pelo método addColorStep, onde o primeiro parâmetro corresponde a “fase” do gradiente (0 = início, 1 = fim) e o segundo corresponde a cor.
Para criação de um preenchimento radial, o código ficaria só um pouco diferente:
1 var gradient = context.createRadialGradient( 2 canvas.width / 2, 3 canvas.height / 2, 4 0, 5 canvas.width / 2, 6 canvas.height / 2, 7 200 8 ); 9 10 gradient.addColorStop(0, '#ff0000'); 11 gradient.addColorStop(0.5, '#00ff00'); 12 gradient.addColorStop(1, '#0000ff'); 13 context.fillStyle = gradient; 14 15 context.fillRect(0, 0, canvas.width, canvas.height);
Os seis parâmetros indicam o centro e o raio do círculo inicial e final do preenchimento radial. O resutlado desse código é…
Criando um padrão novo com uma imagem
Já conseguimos preencher retângulos com cores sólidas. Também já conseguimos preencher um retângulo com gradientes. Agora, é hora de apreendermos algo sobre preenchimentos com imagens. Observe o documento que segue:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Canvas 6</title> 5 <style> 6 body, canvas 7 { 8 margin : 0; 9 width:100%; 10 height:100%; 11 } 12 </style> 13 </head> 14 <body> 15 <canvas id='myCanvas'></canvas> 16 <script> 17 var canvas = document.getElementById('myCanvas'); 18 var context = canvas.getContext('2d'); 19 var img = document.createElement('img'); 20 21 22 canvas.width = window.innerWidth; 23 canvas.height = window.innerHeight; 24 25 26 img.onload = function () { 27 context.fillStyle = 28 context.createPattern(this, 'repeat'); 29 context.fillRect( 30 0, 0, canvas.width, canvas.height); 31 } 32 img.src = 'foto.jpg'; 33 </script> 34 </body> 35 </html>
Repare que utilizei um padrão diferente dos outros documentos. Meu desejo era fazer o canvas que ocupasse toda a área cliente do browser (funcionou em todos os browsers, menos no IE 
).
Repare minha “trapaça”: criei um elemento img dinamicamente e assinei o onload. Por que fiz isso? Para ter garantias de que meu recurso havia sido “carregado” antes de criar o padrão. O parâmetro de petição é bem simples, pode ser: repeat, repeat-x, repeat-y ou no-repeat (como no CSS).
No meu computador, com minha foto, ficu assim:
Observe que se o canvas for redimensionado, a imagem é “redimensionada” para continuar preenchendo o espaço adequadamente…
Desenhando …
O elemento canvas suporta desenho. Observe:
1 context.fillRect(0, 0, 300, 300); 2 3 context.fillStyle = 'rgb(255,255,0)'; 4 context.beginPath(); 5 context.arc(150, 150, 120, 0, Math.PI * 2, true); 6 context.fill(); 7 context.strokeStyle = 'rgb(0,0,255)'; 8 context.lineWidth = 5; 9 context.arc(150, 150, 120, 0, Math.PI * 2, true); 10 context.stroke(); 11 12 context.beginPath(); 13 context.arc(150, 150, 90, 0, Math.PI, false); 14 context.stroke(); 15 16 context.fillStyle = 'rgb(0,0,255)'; 17 context.beginPath(); 18 context.arc(110, 110, 10, 0, Math.PI * 2, false); 19 context.fill(); 20 21 context.beginPath(); 22 context.arc(190, 110, 10, 0, Math.PI * 2, false); 23 context.fill();
O que eu fiz?
- Na linha 1, pintei o fundo com preto… (não tendo padrão definido, preto é o padrão);
- Nas linhas 4, 12, 17 e 21 utilizou o comando beginPath. Esse método informa ao contexto que estamos iniciando um novo “desenho” (path);
- usei o método arco para desenhar círculos e arcos … basicamente, definimos o ponto central, um ângulo inicial, um angulo final e o sentido (clock-wise ou counterclock-wise).
Definindo HTML5
Como prometido, durante essa série, na medida em que vamos conhecendo mais detalhes do HTML5, vou tentar ir criando uma definição para a linguagem. Nossa definição hoje fica assim:
HTML5 é a nova versão do HTML (anterior era 4.01) – uma linguagem para desenvolvimento de aplicações web online e offline – que está sendo desenvolvida pelo W3C e pelo WHATWG. Dá mais ênfase para o significado do conteúdo que para como que escrevemos documentos. Além disso, simplifica a criação de formulários e players de áudio/vídeo reduzindo a necessidade de código JavaScript ou plugins. Define duas novas API de persistência, superiores ao cookies, sendo que uma delas é um banco de dados SQL. Tem suporte consistente para Messaging e para manipulação gráfica em 2D.
Por hoje .. era isso…
Ah … quer saber o resultado do documento que mostrei acima??
Aqui funciona no IE9 Beta e IE PP6. =)
[]s,
Vinicius
Pingback: HTML 5 – Parte 10 – Animação « Elemar DEV
Pingback: HTML 5 – Parte 11 – Detectando suporte para HTML5 « Elemar DEV
Obrigado por este pelos esclarecimentos,…
mas é possivél fazer gradientes em circulos, em conjunto com este metodo context.arc, para construir uma esfera com renderização mais sofisticada? Não encontrei nada na internete sobre circulos com gradiente para HTML5.