HTML Canvas - Desenhando gráficos com HTML e Javascript

Tags: , , — April 14, 2008 @ 2:12 pm

A web e seus navegadores já evoluíram muito desde sua concepção em tratando-se de recursos mas ainda há gente que acredita que sobrecarregar páginas com imagens *.GIF e Flash são os únicos métodos de exibir animações na web.

Eu, particularmente, desgosto muito de GIFs animados, acho algo irritante e ultrapassado, e Flash, apesar de seus excelentes recursos, tem três pontos negativos: os arquivos costumam ser demasiado grandes, é necessário um plugin proprietário para exibí-los e os usuários não tem acesso aos fontes.

Mas diferente do que muitos acham, a linguagem HTML também evoluiu muito e, sendo integrada com outras linguagens como XML e Javascript, dispõe de outras alternativas.

Imagens SVG são hoje um padrão que deve ser exibido por qualquer navegador web recente, e estas também aceitam animações. Como SVGs são basicamente arquivos XML, elas tendem a ser, desde que usem traços simples, extremamente menores que imagens binárias, e suas animações são implementadas alterando as coordenadas das imagens, e não duplicando-as, como acontece com GIFs.

canvas_tut_examples.jpgE existe também o elemento <canvas> (que é onde quero chegar), que pode exibir gráficos criados em tempo real e até mesmo animações interativas no navegador. Atualmente compatível com Firefox 1.5+ e Safari.

<canvas> é um novo elemento HTML especificado na documentação do que deverá ser o HTML 5, e pode ser usado para desenhar imagens usando linguagens de scripts (geralmente Javascript). Podendo criar composições de fotos e animações simples e até interativas. Veja um exemplo simples a seguir e seu respectivo código:

canvas_ex1.png

<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);
 
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

Desenvolvido originalmente pela Apple para seu Dashboard (os widgets de desktop do Mac OS X) e posteriormente implementado no Safari. Navegadores baseados na engine Gecko 1.8 e posterior também suportam o elemento <canvas>.

Executar Javascript constantemente em uma página deixa a navegação extremamente lenta, estão, o simples relógio exibido na imagem a direita prejudica bastante a navegação, quando em execução. Assim vale lembrar que apesar da praticidade, utilizar o elemento <canvas> pode não ser a melhor opção em alguns casos, mas de qualquer modo é impressionante o que pode-se fazer com ele. Veja alguns exemplos nos links abaixo:

Raycaster Um labirinto interativo feito em <canvas>

Reflect Um efeito de reflexão tipo água de imagens

Canvas Paint Um editor de imagens como o Ms Paint

Mario Game O melhor. Um clone do jogo Mario, do Nintendinho, que um amigo divulgou aqui, feito inteiramente com <canvas> (ele também tem uma versão usando DIVs, para funcionar no IE), e sem nenhuma imagem.

Vale lembrar que estes demos só funcionam no Firefox e Safari.

Fonte: MDC: Canvas Tutorial

Se você gostou deste artigo, inscreva-se em meu RSS feed!

Related posts

1 Comment »

  1. […] Exemplos, Firefox Adicionar Comentários Escrito por Enéas Gesing Estive lendo um artigo sobre o objeto HTML Canvas e Javascript e recebi do SamuraiDio, proprietário do blog um link para um efeito muito legal sobre o […]

    Pingback by Efeito em movimento de reflexão d’água em imagens — April 15, 2008 @ 2:05 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment