Artigos HTML e CSS HTML5 - A tag CANVAS

Antes de falarmos do HTML5, precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolvedores foi alertada de boas práticas que deveria seguir. Formatação, separação de código, acessibilidade eram algumas dessas boas práticas.

Porém essa versão ainda não trazia um grande diferencial e também não facilitava o uso de Javascript e CSS.

O que é HTML5?

O HTML5, logicamente, é a evolução direta do HTML4, a qual corrige bugs de sua versão anterior e principalmente traz muitas melhorias à linguagem, pois tem como um de seus objetivos facilitar a manipulação do elemento possibilitando ao desenvolvedor modificar as características do objeto de forma não intrusiva.

Saiba mais: Curso de HTML Básico

Entre outras características, a 5ª versão do HTML vem com novas tags, como por exemplo: <videoc, <audio> e <canvas>.

Visto isto, podemos dar início ao principal foco deste artigo, que é entender e exemplificar a Tag Canvas.

A tag canvas

A canvas nada mais é do que um espaço onde podemos desenhar elementos específicos, formas geométricas e imagens, por exemplo, através de script (javascript geralmente). Também podemos usar CSS para a tag .

Por Javascript podemos acessar métodos da canvas que desenham formas, linhas, caracteres e adicionar imagens.

Vale resaltar que versões antigas de navegadores podem ser incompatíveis, as versões do Internet Explorer anterior ao 9, por exemplo.

Criar uma canvas não difere do que já conhecemos de outras tags HTML. Vejamos:

Listagem 1: Criando uma canvas


<!DOCTYPE html>
<html>
<body>
<canvas id="idCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Se seu navegador não suportar HTML5 você verá esta mensagem.
</canvas>
</body>
</html>

Na Listagem 1 criamos uma canvas com largura 200px e altura 100px e usamos CSS para decoramos a borda da mesma.

Note que coloquei um texto dentro da canvas que será exibido caso você não esteja usando um navegador que tenha suporte ao HTML5, lembre-se que não podemos colocar elementos HTML dentro de canvas. Veremos no próximo tópico como desenhar dentro da canvas por Javascript.

Desenhando formas e imagens na canvas

Muito bem, vamos começar a desenhar agora. Nos próximos exemplos veremos como desenhar círculos, retângulos, linhas e por fim veremos como adicionar imagens.

Antes de começarmos os desenhos, devemos saber que uma canvas é composta por pixels como em um plano cartesiano que começam em x = 0 e y =0 no canto superior esquerdo onde x é crescente para a direita e y é crescente para baixo.

Modelo de uma canvas
Figura 1: Modelo de uma canvas

Outra coisa que devemos saber é que sempre antes de desenhar, devemos selecionar a canvas e capturar o contexto gráfico da mesma, pelo metodo getContext(), da seguinte forma:

Listagem 2: Selecionando a canvas e capturando o contexto gráfico.


var c=document.getElementById("idCanvas");
var ctx=c.getContext("2d");

Para desenhar qualquer coisa na canvas, sempre devemos ter o contexto dela acessível, por isso armazenamos ele em uma variável.

Desenhando Linha

Para desenharmos uma linha, precisamos usar no mínimo três métodos, são eles: moveTo(x,y), lineTo(x,y) e stroke(). O primeiro define o ponto inicial da linha, já o segundo é o próximo ponto, o último, por sua vez, desenha a linha. Vejamos um exemplo na Listagem 3.

Listagem 3: Criando um linha


var c=document.getElementById("idCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);//ponto inicial
ctx.lineTo(150,50);//próximo ponto
ctx.stroke();//desenha

Desenhando um circulo

Aqui vamos precisar basicamente de dois métodos: arc(x,uy,r,aInicial,aFinal) que recebe as coordenadas onde será colocado o centro do circulo, o raio e os ângulos em relação aos quadrantes do círculo, e o já conhecido stroke(). Vejamos na prática:

Listagem 4: Desenhando o circulo


var c=document.getElementById("idCanvas");
var ctx=c.getContext("2d");
ctx.arc(70,18,15,0,Math.PI * 2);
ctx.stroke();

Note que estamos usando Math.PI * 2 onde deveríamos passar o ângulo final, isso nada mais é que uma forma de desenhar um circulo completo. Você pode experimentar mudar esses valores e ver como fica.

Desenhando um Retângulo

No desenho do retângulo, apenas mais um método que não conhecemos é apresentado: rect(x,y,largura,altura). Em sguida usamos novamente o stroke().

Listagem 5: Desenhando um retângulo


var c=document.getElementById("idCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,50);
ctx.stroke();

Adicionando imagens

Para imagens o processo é um pouco diferente do que vimos até agora, mas é tão simples quanto. Precisaremos instanciar um objeto do tipo Image e adicionar ao método onload dela uma função que chama o método drawImage(Image,x,y) e, finalmente, dizer para o objeto do tipo Image qual a url da imagem. Vejam os passos na Listagem 6:

Listagem 6: Desenhando uma image


var c=document.getElementById("idCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="img.png";

Obrigado, deixem seus comentários e até a próxima.

Links Úteis
  • PHPMailer: Envio de e-mails com PHP:
    Enviar e-mails é uma necessidade frequente em diferentes projetos. Aprenda neste conteúdo como utilizar a biblioteca PHPMailer para enviar e-mails em seu projeto PHP.
  • Como publicar seu app iOS na App Store:
    Neste curso você aprenderá a publicar seu aplicativo iOS na App Store, disponibilizando-o para que seus usuários possam fazer download e instalá-lo em seus dispositivos.

Saiba mais sobre HTML5 ;)