RMFAIS - CANVAS
COMPUTAÇÃO GRÁFICA PARA INTERNET
Além da inserção de imagens em uma páginas HTML, é possível também a criação dessas
por meio de programação que misturam funções e coordenadas matemáticas em um eixo cartesiano.
No HTML5 foi introduzida a tag CANVAS, possibilitando criar, em uma página HTML,
uma área para renderização de formas geométricas e efeitos gráficos.
Este pequeno texto é apenas uma introdução a programação com canvas
no que se refere a criação das formas geométricas. Os parâmetros que delimitam
as figuras e os seus respectivos tamanhos são informados em uma função
JAVASCRIPT
e relacionados a uma área delimitada por canvas por meio da cláusula
ID="nome do elemento especificado na função".
A disposição e localização dos elementos se baseiam em coordenadas cartesianas conforme
mostrado na seguinte ilustração:
Observe que, com base nas coordenas x,y, foram criados vetores (segmentos de retas com origem, destino e sentido) que possibilitaram
a criação de formas geométricas. Tais vetores podem se exibidos em uma página HTML por meio de programação CANVAS com as funções moveTo(),
que marca o ponto de origem, e lineTo(), que marca o ponto de destino. Quando os vetores são segmentados, utiliza-se um ponto de origem e
vários pontos de destino, quando não são segmentados pode ser necessário mais de um ponto e origem e destino. Para que as figuras sejam
efetivamente mostradas na tela, aplica-se a função stroke();
Os códigos abaixo mostram como criar as figuras exibidas na ilustração.
a) Figura do triangulo:
b) Figura da letra X:
A função stroke() exibe apenas as retas, no caso do triângulo, que é uma figura segmentada, pode-se utilizar a função fill()
no lugar de stroke() para preenchê-lo com uma cor previamente informada em fillStyle. Exemplo: fillStyle = 'blue';
Além das funções moveTo() e lineTo(), já exemplificadas, que podem ser utilizadas para criação de qualquer forma geométrica,
muitas outras fazem parte do manual CANVAS conforme demonstrado nos exemplos a seguir:
função fillRect(): para criação de quadrados ou retângulos.
função arc(): para criação de arcos, elípses ou círculos.
função fillText(): para exibição de textos.
ATIVIDADES COM CANVAS EM UM DOCUMENTO HTML
1) Monte dois losangos, um sem cor de preenchimento e outro com cor de preenchimento.
2) Crie um quadrado e um retângulo com cor de preenchimento.
3) Faça uma estrela com cinco pontas.
Note que a tag canvas suporta width para especificar a sua largura e height para especificar sua altura, podendo uma borda ser especificada com style="border:1px solid #000000; padding:15;", onde padding impede que as formas geométricas fiquem enconstadas nas bordas do canvas.