Cómo funciona la animación HTML5 Canvas

Dentro de los diferentes elementos que forman parte del lenguaje HTML5, Canvas es uno de esos elementos gracias al cual podemos dibujar gráfico, modificar y manipular imágenes y por supuesto, también nos permitirá realizar animaciones dentro de una página web de manera dinámica, es decir, que el gráfico se va a crear cuando la página se cargue.

Este gráfico va a ser definido a través de la programación, normalmente haciendo uso de Javascript, y será cuando el gráfico ya haya sido creado, cuando se programarán las diferentes acciones que permitirán al usuario interactuar con él. Por ejemplo, una de esas interacciones puede ser la de pulsar o hacer clic para que la animación comience a ser reproducida.

Cuando hablamos de Canvas lo estamos haciendo en un sentido amplio, refiriéndonos no sólo a la etiqueta <canvas></canvas> con la que se crea, sino a toda una API para desarrolladores la cual incluya toda una serie de funciones que permiten escalar, girar, modificar, elementos gráficos, así como dibujar círculos, léneas, rectángulos, etcétera. Una vez creado el dibujo, lo que queda en la página web es un mapa bits, una imagen cuyos píxeles podremos manipular uno a uno.

Canvas es un elemento que fue incorporado hace relativamente poco tiempo a HTML de tal forma que los navegadores más antiguos no será capaces de representarlo. Por esta razón, es conveniente proporcionar una alternativa a estos navegadores que no soportan Canvas, como por ejemplo una imagen fija.

Las versiones más antiguas de los navegadores más populares que ya son compatibles con Canvas son Safari 6.0, Firefox 20, Google Chrome 26, o Internet Explorer 10.

Como vemos en el Master en Diseño grafico y web, Canvas/HTML5 está sustituyendo progresivamente a Flash, y su mayor ventaja sobre éste es que, al ser un elemento de HTML5, cualquier navegador debe ser capaz de manejarlo, mientras que Flash requiere que el usuario instale un plug-in o complemento.