Introdução a Canvas do HTML5

De alguns anos para cá a tendência no desenvolvimento Web é gerar gráficos de relatórios diretamente no navegador do usuário e não mais no lado servidor. A vantagem é que todo o processamento fica no lado cliente e devido ao dinamismo do JavaScript é possível aplicar efeitos e animações… muito legal, não é?

Mas você já se perguntou que tecnologia é utilizada para desenhar esses gráficos via JavaScript? A resposta é Canvas do HTML5.

Com Canvas podemos desenhar gráficos, figuras geométricas, imagens, textos e animações diretamente no browser. Para você ter idéia do poder da tecnologia, com um pouco de JavaScript e Canvas nosso ex-estagiário criou em questão de minutos a logo da TriadWorks:

Não pára por aí… Se você conhecer um pouquinho de JavaScript e tiver uma boa lógica de programação você consegue criar um jogo sem muitas dificuldades! O melhor é que seu jogo rodará no navegador do seu desktop ou smartphone!

Para ajudá-lo a entender como o Canvas funciona e dar seus primeiros passos com a tecnologia nós postamos no blog uma introdução muito objetiva e didática do assunto:

>> HTML5: desenhando gráficos no browser com Canvas

No post de quebra ainda te damos algumas dicas sobre engines e framework para criação de jogos usando HTML5.

Como você já deve ter observado, a tendência do mercado é aproveitar melhor os recursos do HTML5 e dos navegadores a fim de criar interfaces de usuário mais ricas. O próprio JSF 2.2 investiu pesado na integração com HTML5!

Enfim, com Canvas + JavaScript você pode ir muito longe!