Canvas HTML5: Como criar a Tag Canvas
HTML5 - A tag CANVAS
Veja nesse artigo uma rápida introdução sobre o HTML5. 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.
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: <videoc, <audio> e <canvas>.
Visto isto, podemos dar início ao principal foco deste artigo, que é entender e exemplificar 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.
Criar uma canvas não difere do que já conhecemos de outras tags HTML. Vejamos:
<canvas id="idCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
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.
Listagem 2: Selecionando a canvas e capturando o contexto gráfico.
var c=document.getElementById("idCanvas");
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
ctx.arc(70,18,15,0,Math.PI * 2);
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.
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
ctx.rect(20,20,150,50);
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
img.src="img.png";
Obrigado, deixem seus comentários e até a próxima.
PHPMailer: Envio de e-mails com PHP:
Saiba mais sobre HTML5 ;)
Guias de Linguagem para Front-end:
Veja aqui todas os nossos Guias para desenvolvedores Front-end.
Guia de Linguagem HTML:
Nesse Guia de Referência você encontrará o conteúdo que precisa para iniciar seus estudos sobre a linguagem HTML, base para a construção das páginas web.