HTML 5 na prática, Canvas – Parte 01

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 () {<br />  // Pegamos o elemento pela referência.<br />  var elem = document.getElementById('tutorial');<br /><br />  // Pegamos o contexto 2D, você pode pegar somente um contexto por elemento.<br />  var context = elem.getContext('2d');<br /><br />  // Definimos as propriedades de estilo.<br />  context.fillStyle   = '#264761';<br />  context.strokeStyle = '#9233A7';<br />  context.lineWidth   = 4;<br /><br />  // Desenhando alguns retângulos, lembrando a ordem dos argumentos: (x, y, width, height)<br />  context.fillRect  (10, 0, 100, 25);<br />  context.strokeRect(10, 35, 100, 25);<br />  context.clearRect (20, 55,  80, 10);<br />  context.strokeRect(10, 70, 100, 25);<br />}, 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';<br />context.strokeStyle = '#9233A7';<br />context.lineWidth   = 4;<br /><br />context.beginPath();<br />context.moveTo(10, 10); //define o ponto de início<br />context.lineTo(100, 100);<br />context.lineTo(200, 10);<br />context.lineTo(9, 10);<br /><br />// Acabamos de desenhar, agora vamos preencher e criar a borda.<br />context.fill();<br />context.stroke();<br />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';<br />context.lineWidth   = 4;<br /><br />context.beginPath();<br />context.arc(75,75,45,0,Math.PI*2,true); //Rosto<br />context.moveTo(110,75);<br />context.arc(75,75,35,0,Math.PI,false);  //Sorriso<br />context.moveTo(65,65);<br />context.arc(60,65,5,0,Math.PI*2,true);  //Olho Esquerdo<br />context.moveTo(95,65);<br />context.arc(90,65,5,0,Math.PI*2,true);  //Olho Direito<br /><br />context.stroke();<br />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