Gráficos e Efeitos em 3D no HMTL5
Uma grande novidade para o HTML5 é o recurso conhecido como Canvas. Equivalente a uma tela de pintura tradicional, ela permite, de forma bem simples, desenhar elementos “on the fly” (em tempo de execução). A área de desenho é apresentada pela tag <canvas>, enquanto o trabalho artístico fica a cargo de comandos utilizando sua API em JavaScript. Abaixo, uma demonstração do que podemos fazer. O resultado pode ser observado na figura que segue.
01 <!DOCTYPE html>
02 <html>
03 <meta charset=”utf-8″>
04 <body>
05 <canvas id=”telaEmBranco” width=”400″ height=”300″></canvas>
06 </body>
07 </html>
08
09 <script type=”text/javascript”>
10 var canvas=document.getElementById(“telaEmBranco”);
11 var ctx=canvas.getContext(“2d”);
12 ctx.beginPath();
13 /*
14 Definindo um retângulo
15 Os dois primeiros números são coordenadas X e Y iniciais,
16 os seguintes são coordenadas finais
17 */
18 ctx.rect(0,0,400,200);
19 //Desenhando o retângulo
20 ctx.stroke();
21
22 //Limpa para novo elemento gráfico.
23 ctx.beginPath();
24 //Definindo um arco.
25 ctx.arc(200,100,60,50,2*Math.PI);
26 //Definindo o preenchimento dele em vermelho.
27 ctx.fillStyle=”red”;
28 //Desenhando e preenchendo.
29 ctx.fill();
30
31 ctx.beginPath();
32 ctx.font=”30px Arial”;
33 // Aplicando o texto na imagem
34 ctx.fillText(“Bandeira do Japão”,70,250);
35 </script>
Henrique Poyatos é coordenador pedagógico de EAD e professor dos cursos de graduação e MBA da FIAP. Pós-graduado em Gerenciamento de Projetos e tecnólogo em Processamento de Dados (FIAP). Atua no mercado de desenvolvimento para Internet desde 1996 e coordenou projetos de tecnologia para empresas como Caixa Econômica Federal, Nossa Caixa, McDonalds, Metrô de São Paulo e clientes internacionais.
