HTML 5 – Parte 9 – Começando a mexer com Canvas

Posted on 29/10/2010

3


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:

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:

Todos esses exemplos são bem avançados, mas dão uma boa “ideia” de até onde podemos chegar.

O elemento

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 1title>  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?

            
    
              
  1. Na linha 13 temos o nosso herói, o elemento canvas. Identifiquei-o com um id simples e especifiquei um tamanho;
    2. 
              
  2. Na linha 15, recupero o elemento canvas;
    3. 
              
  3. Na linha 16, recupero o contexto 2D, que é uma espécie de “Graphics” onde, efetivamente, emitimos todas as instruções de desenho;
    4. 
              
  4. Na linha 17, indico onde devem ser “colados” os scripts aque apresentarei nos demais exemplos deste post.
    5. 
            

            
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:

            
image

            
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 é:

            
image

            
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:

            
image

            
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:

            
image

            
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 é…

            
image

            
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 6title>  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 Smiley triste).

            
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:

            
image

            
Observe que se o canvas for redimensionado, a imagem é “redimensionada” para continuar preenchendo o espaço adequadamente…

            
image

            
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??

            
image

            
            

              Etiquetado:
            

            

              Posted in: Sem categoria