HTML5 - A tag CANVAS
Veja nesse artigo uma rápida introdução sobre a nova versão da linguagem de marcação de texto, HTML. E como principal foco deste artigo, está a nova tag CANVAS, como criá-la e desenhar nela, formar linhas e imagens. 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.
Atenção! Neste artigo julgo que os leitores já têm conhecimento sobre HTML, tendo em vista que não será abordada a iniciação ao mesmo.
O que é HTML5?
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 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.
Entre outras características, a 5ª versão do HTML vem com novas tags, como por exemplo: <video>, <audio> e <canvas>.
Visto isto, podemos dar início ao principal foco deste artigo, que é entender e exemplificar a tag .
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.
Lembre-se que em uma canvas podemos apenas desenhar elementos gráficos e não elementos HTML, por exemplo, uma
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.
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
<script type="text/javascript">
var c=document.getElementById("idCanvas");
var ctx=c.getContext("2d");
</script>
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
<script type="text/javascript">
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
</script>
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
<script type="text/javascript">
var c=document.getElementById("idCanvas");
var ctx=c.getContext("2d");
ctx.arc(70,18,15,0,Math.PI * 2);
ctx.stroke();
</script>
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
<script type="text/javascript">
var c=document.getElementById("idCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,50);
ctx.stroke();
</script>
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
<script type="text/javascript">
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";
</script>
Bem, galera, fico por aqui. Espero que tenham gostado, e se quiserem saber mais sobre os métodos da canvas, visitem esse link http://www.w3schools.com/html5/html5_ref_canvas.asp.
Obrigado, deixem seus comentários e até a próxima.
Allan Douglas
Analista Programador, com foco nas linguagens Java e PHP, Tecnico em Informática Formado pela Escola Técnica Redentorista - Campina Grande Paraíba. Graduando em Análise de Sistemas pela Estácio do Recife.
5 COMENTÁRIOS
Tens alguns links para indicar a respeito desse assunto.
Grato! :)
http://www.html5canvastutorials.com/
Abraço!
Talvez aja algum erro de sintaxe
