ARTÍCULO 28: Introducción a Canvas. Gráficos y animaciones en HTML 5. (I)


Aquí verás un vídeo con la primera parte de este artículo: Tutorial

Aquí verás un vídeo con la segunda parte de este artículo: Tutorial

En este artículo vamos a ver los conceptos básicos de Canvas de una forma práctica, incluso podrás modificar y ejecutar el código desde aquí mismo.

Canvas es un elemento de HTML 5 que permite dibujar gráficos, manipular imágenes y realizar animaciones en una página web de forma dinámica. Es decir, el gráfico se crea en el momento en que se carga la página. El gráfico se define mediante programación, usualmente Javascript. Una vez creado el gráfico se pueden programar acciones para que el usuario interactue con él, por ejemplo, haciendo clic para arrancar una animación o arrastrando un elemento del gráfico.

Aunque el elemento Canvas se crea con la etiqueta <canvas> </canvas> al hablar de Canvas en sentido amplio nos referimos a toda la API que incluye un conjunto de funciones para dibujar, líneas, rectángulos, círculos, etc. así como para rotar, escalar, transformar elementos gráficos, y otras funciones de variado uso.

Al definir un Canvas en una página web se crea un lienzo de dibujo o área de dibujo rectangular. Después de crear el dibujo lo que queda es un "mapa de bits", es decir, cada coordenada del lienzo tiene asignado un color, no queda ninguna estructura de lo que contiene el lienzo. Canvas no crea objetos vectoriales al estilo de otros entornos como SVG o Flash, sino mapas de bits como una imagen fotográfica.

De hecho podemos cargar una imagen fotográfica en el Canvas y manipular sus pixeles uno a uno.

Canvas ha sido incorporado recientemente al HTML y no puede ser representado por los navegadores antiguos. Se requiere una versión actualizada de Chrome (26), Firefox (20), Internet Explorer(10), Safari (6.0), etc. Es conveniente dar un contenido alternativo para los navegaores que no soportan Canvas, como una imagen fija o un texto aclaratorio, como veremos más adelante.

Canvas frente a Flash

Hasta la fecha (2013) la mayoría de los gráficos y animaciones interactivas de la web se realizan con Adobe Flash, a partir de ahora está tomando fuerza la opción Canvas/HTML5, en el futuro inmediato parece que seguirá usándose Flash hasta que Canvas sea capaz de realizar todo lo que Flash puede hacer.

Canvas es un elemento estándar de HTML5 y cualquier navegador debe ser capaz de manejarlo, mientras que Flash es una tecnología de una empresa que requiere instalar en el navegador un complemeto (plug-in).

Hasta la fecha la mayoría de los navegadores tienen instalado el complemento de Flash mientras que todavía hay muchos navegadores instalados que no soportan Canvas. Sin embargo esto va a cambiar rápidamente puesto que los navegadores nuevos que se van instalando no llevan Flash y sí soportan Canvas.

Desde el punto de vista del creador de gráficos es más fácil y rápido trabajar con Flash que con Canvas ya que Flash dispone de un entorno de diseño gráfico avanzado (Adobe Flash CS6) mientras que crear gráficos Canvas con JavaScript es más arduo. Esto también está cambiando con la aparición de frameworks para Canvas al estilo de paper.js.

Por otro lado Canvas es libre y abierto por lo que no hay que pagar licencia, mientras que Flash es propiedad de la empresa Adobe.

Respecto a lo que se puede hacer con cada sistema, hoy por hoy, los juegos complejos siguen haciéndose, mayoritariamente, con Flash.

Si tenemos que utilizar un gráfico a varias resoluciones, la tecnología vectorial de Flash es más eficiente que los mapas de bits de Canvas. En cambio, para gran parte de gráficos para la web, los gráficos Canvas se cargan más rápidamente que los de Flash.

Flash requiere más recursos para ejecutarse por lo que en dispositivos móviles Canvas lleva ventaja.

Otra alternativa para crear gráficos para la web es SVG que es un sistema vectorial, reconocido por W3C y soportado por los navegadores web modernos sin necesidad de instalar plug-in.

Abril-2013
Pág. 1 de 5

Atrás  Inicio  Adelante





.