Leonardo Moreira

Oi pessoal, tudo bem? Hoje quero mostrar o HTML 5 na prática, nada de teorias sobre novas funcionalidades e especifícações, vamos ao que interessa.

INTRODUÇÃO

canvas é um novo e poderoso elemento entre as inúmeras novas funcionalidades do HTML 5. Com o canvas você consegue de maneira fácil criar gráficos, composições de fotos e animações usando JavaScript. Pense em um bloco de notas, cada folha é um elemento canvas onde você pode usar um contexto diferente, utilizando ou não API’s para fornecer funcionalidades de desenho.

Nesse tutorial vou tentar passar um pouco de como implementar um contexto de canvas 2D em seu código HTML, é requisito que você conheça o básico de JavaScript.

Com a chegada do Internet Explorer 9, todos os grandes navegadores já tem suporte para canvas em suas versões mais atuais, se o seu navegador está desatualizado, aproveite agora para atualizar.

Princípios básicos

Vamos começar inserindo o elemento canvas em seu HTML:

<canvas id="tutorial" width="300" height="300"></canvas>

Você precisa identificar o elemento para encontrar mais tarde via JavaScript, nosso canvas então está identificado como #tutorial. O elemento canvas possui apenas dois atributos – width e height. Se esses elementos não estiverem especificados via CSS ou pelas propriedades DOM, a tela será criada inicialmente com 300 pixels de largura e 150 pixels de altura.

Linhas e Retângulos

Com as propriedades fillStyle e strokeStyle conseguimos configurar facilmente as cores utilizadas em nossas formas, os valores de cores que você pode usar são os mesmos do CSS: códigos hex, rgb (), RGBA () e até mesmo HSLA () se o browser suportar (por exemplo, o Opera 10 e Firefox 3).

Com fillRect você pode desenhar retângulos preenchidos, com o strokeRect podemos desenhar contornos retangulares e ainda temos o clearRect para limpar e criar áreas transparentes. Esses três métodos usam os mesmos argumentos: x, y, width, height. Os dois primeiros, x e y definem a posição do seu desenho na tela (canvas) e os outros, width e height definem o tamanho do seu retângulo, por exemplo. Para alterar a expessura das bordas, você pode usar a propriedade lineWidth.

Bom, vamos ver na prática como funciona tudo isso junto?

window.addEventListener('load', function () {
  // Pegamos o elemento pela referência.
  var elem = document.getElementById('tutorial');

  // Pegamos o contexto 2D, você pode pegar somente um contexto por elemento.
  var context = elem.getContext('2d');

  // Definimos as propriedades de estilo.
  context.fillStyle   = '#264761';
  context.strokeStyle = '#9233A7';
  context.lineWidth   = 4;

  // Desenhando alguns retângulos, lembrando a ordem dos argumentos: (x, y, width, height)
  context.fillRect  (10, 0, 100, 25);
  context.strokeRect(10, 35, 100, 25);
  context.clearRect (20, 55,  80, 10);
  context.strokeRect(10, 70, 100, 25);
}, false);

Veja esse exemplo funcionando, clique aqui.
Resultado:

Paths

Os “caminhos” permitem você criar formas personalizadas com canvas. Primeiro criamos o path chamando o método beginPath(), depois vamos desenhar nosso objeto utilizando linhas, curvas e outras formas primitivas de desenho e quando o desenho estiver pronto, vamos preencher com fill() e stroke() , depois podemos chamar closePath() para finalizar nosso path.

Vamos ver isso na prática criando um triângulo:

  context.fillStyle   = '#264761';
  context.strokeStyle = '#9233A7';
  context.lineWidth   = 4;

  context.beginPath();
  context.moveTo(10, 10); //define o ponto de início
  context.lineTo(100, 100);
  context.lineTo(200, 10);
  context.lineTo(9, 10);

  // Acabamos de desenhar, agora vamos preencher e criar a borda.
  context.fill();
  context.stroke();
  context.closePath();

Veja esse exemplo funcionando, clique aqui.

Eis que nasce o nosso triângulo:

moveTo

Imagine um papel e uma caneta, o moveTo nada mais é que a posição inicial da sua caneta no papel, assim podemos mudar nossa “caneta” de lugar e começar novas linhas de desenho em posições isoladas.

A função moveTo leva dois argumentos – x e y, – que são as coordenadas do novo ponto de partida.

Um exemplo na prática de como usar o moveTo.

  context.strokeStyle = '#FF8A00';
  context.lineWidth   = 4;

  context.beginPath();
  context.arc(75,75,45,0,Math.PI*2,true); //Rosto
  context.moveTo(110,75);
  context.arc(75,75,35,0,Math.PI,false);  //Sorriso
  context.moveTo(65,65);
  context.arc(60,65,5,0,Math.PI*2,true);  //Olho Esquerdo
  context.moveTo(95,65);
  context.arc(90,65,5,0,Math.PI*2,true);  //Olho Direito

  context.stroke();
  context.closePath();

Veja esse exemplo funcionando, clique aqui.
Resultado:

Conclusão e Demos

Pessoal, espero que tenham entendido o básico sobre canvas, agora é começar a brincar com o que eu passei e continuar estudando, em breve vou escrever a parte 2 da série “HTML 5 na prática”, irei continuar falando sobre canvas e os métodos bezierCurveTo, quadraticCurveTo e arc.

Por enquanto é isso, segue algumas demos usando HTML 5:

Interpolation Polynomial
The ernie network graph
Cake – Vários exemplos.

HTML 5 na prática, Canvas – Parte 2

A parte 2 da série “HTML 5 na prática, Canvas” já foi publicada, clique aqui.