Por Alejandro Martín Bailón-Tradução CRV
Pessoalmente, penso que a etiqueta Canvas junto com a integração nativa do formato SVG é uma das novidades mais importantes que incorpora a linguagem. SVG nos vai permitir realizar gráficos vetoriais bidimensionais, integrando-se com a maioria das tecnologias atuais, à hora de poder dispor em nossas páginas HTML5 de diferentes tipos de objetos como podem ser formas gráficas, imagens ou textos vetoriais.
A ideia é bem simples. Dispor de um arquivo XML onde definimos nosso desenho gráfico e situá-lo no navegador com quaisquer dos mecanismos disponíveis entre os que vamos encontrar a possibilidade de abri-lo diretamente com o navegador, situá-lo embedded no código HTML mediante a etiqueta <Svg>, como uma imagem em CSS ou então mediante o uso das etiquetas <Object> o <Embed>.
O uso da etiqueta Canvas vai permitir realizar gráficos de alto nível, animações, jogos, etc. vendo-se potencializada à hora de renderizar os elementos que nela se exibam mediante a integração do navegador Internet Explorer 9 com a aceleração por hardware, o que fará com que em vez de utilizar a CPU se utilize o chip gráfico GPU.
Também temos de pensar na importância de eliminar codecs ou pluggins desnecessários com o uso de tal etiqueta. Vejamos como fica sua implementação. Para isso, situe-se ao final do último parágrafo e localize a etiqueta <canvas> denominada "meuGrafico". A entrada tem que ficar exatamente assim:
<canvas id="meuGrafico" height="300px" width="520px"> </canvas>
A seguir, devemos prosseguir acrescentando a porção de código JavaScript ao entorno para poder renderizar dentro da etiqueta <Canvas> estabelecida no passo anterior, a visualização de um gráfico extraído dos informes de rendimento realizado por SunSpider JavaScript Benchmark. Para isso, observe o código situado dentro da etiqueta <Script>. Esse código se encarrega de criar a função gráfico. Para que tal função se execute vamos chamá-la através do evento onload="grafico()" como atributo da etiqueta <Body>.
Se vocês quiserem aprender a realizar animações utilizando a etiqueta <Canvas>, vocês dispõem de um tutorial em Windows Técnico, onde explico passo a passo o funcionamento dessa etiqueta. Bom, chegados a este ponto, podemos realizar outro preview no navegador para ver como fica nosso gráfico.
Agora vejamos outro exemplo, desta vez integrando um arquivo SVG para visualizar os comentários que as pessoas vão postando no blog. O arquivo vai ser implementado utilizando a etiqueta
