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 () {
  // 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.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: