Oi, pessoal, tudo bem? Hoje quero mostrar o HTML 5 na prática, nada de teorias sobre novas funcionalidades e especificaçõ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.

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

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

Princípior 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).

Já com o 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. 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);

Resultado:

Veja esse exemplo funcionando, clique aqui

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, 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();

Eis que nasce o nosso triângulo:

Veja esse exemplo funcionando, clique aqui.

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();

Resultado:

Veja esse exemplo funcionando, clique aqui.

Conclusão e demos

Pessoal, espero que tenham entendido 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 e também vou falar sobre manipulação de imagens.

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

• Interpolation Polynomial
• The ernie network graph
• Cake Vários exemplos
• Quake 3 com HTML 5