Elemar DEV

Tecnologia e desenvolvimento

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:

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

  1. Na linha 13 temos o nosso herói, o elemento canvas. Identifiquei-o com um id simples e especifiquei um tamanho;
  2. Na linha 15, recupero o elemento canvas;
  3. Na linha 16, recupero o contexto 2D, que é uma espécie de “Graphics” onde, efetivamente, emitimos todas as instruções de desenho;
  4. 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:

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

4 comentários em “HTML 5 – Parte 9 – Começando a mexer com Canvas

  1. Vinicius Canto
    29/10/2010

    Aqui funciona no IE9 Beta e IE PP6. =)

    []s,

    Vinicius

  2. Pingback: HTML 5 – Parte 10 – Animação « Elemar DEV

  3. Pingback: HTML 5 – Parte 11 – Detectando suporte para HTML5 « Elemar DEV

  4. César
    28/10/2012

    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.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Informação

Publicado às 29/10/2010 por em Sem categoria e marcado .

Estatísticas

  • 628,702 hits
%d blogueiros gostam disto: