Mas, o que é a tag Canvas, como ela funciona e pra que exatamente ela serve ? A grosso modo, essa tag cria uma área retangular dentro de uma página HTML onde é possível desenhar livremente. Ela faz isso franqueando ao desenvolvedor acesso aos pontos (pixels) que compõem a área, o que pode ser combinado com eventos para criar animações. É um comportamento análogo ao disponível através da classe TCanvas que há no Delphi. Tal analogia é reforçada pelo fato que a tag Canvas em si apenas demarca a região na página HTML, sendo que quaisquer desenhos ou interações que se queira implementar têm que ser obtidos através de programação, usando os métodos e propriedades disponibilizados para uso com JavaScript.
Para começar, então, devemos incluir no corpo do texto HTML a marcação do lugar onde o Canvas será renderizado, exatamente do mesmo modo que fazemos com outras tags. O exemplo abaixo cria uma página HTML que possui apenas um Canvas, com comprimento de 400 pontos e altura de 200 pontos:
<body>
<canvas id="myCanvas" width="400" height="200"
style="border:1px solid #c3c3c3;">
Seu navegador não suporta canvas ...
</canvas>
/* ... */
</body>
O texto inserido na tag será exibido apenas se a página for aberta por um navegador que não implementa o recurso de Canvas. Neste caso, para obter um resultado mais profissional, o texto pode ser substituído por um conteúdo HTML apropriado - como uma imagem, por exemplo.<canvas id="myCanvas" width="400" height="200"
style="border:1px solid #c3c3c3;">
Seu navegador não suporta canvas ...
</canvas>
/* ... */
</body>
Daqui em diante, todo o trabalho em cima do Canvas tem que ser feito por JavasScript. Primeiro, precisamos recuperar o contexto para desenho pois é nele que o conteúdo apresentado pelo Canvas é criado e manipulado:
function desenha () {
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
/* ... */
}
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
/* ... */
}
Todas as funções disponíveis no contexto que recuperamos deverão informar coordenadas, isto é, pares de valores (x,y) para se referir a um ponto dentro do plano delimitado pela área do Canvas. A diferença em relação a um plano cartesiano é que no canvas o canto superior esquerdo é sempre (0,0), com os valores de X crescendo para a direita e os de Y crescendo para baixo, como mostra essa imagem da fundação Mozilla :
O exemplo abaixo é bastante básico : move a posição atual do cursor de desenho para o centro do Canvas, traça uma linha até o canto inferior esquerdo, outra até o canto inferior direito e uma terceira até o ponto original. Por fim, a figura fechada é preenchida com a cor corrente :
|
/* ... */ ctx.beginPath (); ctx.moveTo (myCanvas.width / 2, myCanvas.height / 2); ctx.lineTo (0, myCanvas.height); ctx.lineTo (myCanvas.width, myCanvas.height); ctx.lineTo (myCanvas.width / 2, myCanvas.height / 2); ctx.stroke(); ctx.fill(); ctx.closePath(); /* ... */ |
No exemplo, o primeiro passo é uma chamada à função moveTo(). Ela em si não faz qualquer desenho, servindo apenas para estabelecer um ponto de partida para passos seguintes. Ou seja, é o ponto onde o pincel primeiro tocará a área de pintura. Assim, ao chamarmos a função lineTo(), traçamos uma linha reta a partir daquele ponto até o ponto indicado nos parâmetros do lineTo. Esse novo ponto, então, passa a ser a posição atual do pincel. Se fosse preciso, poderíamos mover novamente sua posição para qualquer outro ponto sem afetar visualmente o canvas.
A função stroke() efetiva todos os comandos dados antes, forçando as linhas a serem traçadas com os estilos estabelecidos. Como não comandamos nada diferente, o canvas usará o estilo padrão de cor, espessura e tracejado.
Para encerrar, a função fill() é chamada para preencher a área interna da figura - também usando estilos padronizados.
Há muitas outras funções para desenhar retângulos, arcos e até curvas mais elaboradas, além da capacidade de incluir textos e imagens externas, o que permite combinar vários recursos para compor figuras bastante complexas. Em outro post, mostra mais desses recursos.
Os exemplos mostrados neste post usam o contexto para desenhos 2D mas já há uma versão experimental de contexto 3D, baseado no WebGL. Veja um exemplo de uso neste link.
Nenhum comentário :
Postar um comentário
OBS: Os comentários enviados a este Blog são submetidos a moderação. Por isso, eles serão publicados somente após aprovação.
Observação: somente um membro deste blog pode postar um comentário.