Introducción a HTML5 Canvas

En este post intentaré hacer una introducción muy sencilla a HTML5 Canvas.

HTML5_Logo_512

¿Qué es?
Canvas en un elemento de html, introducido a partir de la versión 5.
El elemento <canvas> es un contenedor vacío que permite dibujar gráficos utilizando javascript.
Canvas cuenta con una API para dibujar líneas, rectángulos, círculos, textos, agregar imágenes, entre otras funcionalidades.

¿Cómo funciona?
En un archivo html convencional, se debe crear el elemento <canvas> para luego acceder a él mediante javascript.

El siguiente paso es crear un script en javascript para poder interactuar con el elemento.

Para poder acceder a los métodos de dibujo de canvas es necesario hacerlo a traves del context. El context es un objeto con propiedades y métodos que permite dibujar gráficos dentro del canvas. El context puede ser 2d ó webgl (3d) y se accede mediante el método getContext().

¿Qué se puede hacer?
HTML Canvas puede dibujar textos.
Canvas puede dibujar textos coloridos con o sin animación.

HTML Canvas puede dibujar gráficos.
Canvas tiene muchos recursos para la representación gráfica de datos, carga de imágenes, etc.

HTML Canvas es animado.
Los objetos dentro de canvas se pueden mover. Desde una animación simple como el rebote de una pelota, hasta complejas animaciones sincronizadas.

HTML Canvas es interactivo.
Canvas responde a todos los eventos de javascript. Los elementos dentro del canvas pueden responder a cualquier acción del usuario (teclas presionadas, click del mouse, etc).

HTML Canvas es ideal para juegos.
Las posibilidades que ofrece canvas son ideales para aplicaciones interactivas y juegos. Carga de imágenes externas, acceso a la API de dibujo, reproducción de audio, eventos de teclado y mouse, animaciones, etc.

HTML5 Canvas Cheat Sheet.
Resumen completo de la API HTML5 Canvas para el contexto 2D, basado en las especificaciones de W3C HTML5 Canvas. Enlace.

Principales ventajas
Multiplataforma.
HTML5 es accesible desde cualquier browser moderno, ya sea desde una pc (windows, linux, mac), un smartphone ó tablet (ios, android, windows phone).
Además de ser accesible desde la web mediante un browser, HTML5 puede ser compilado en aplicaciones nativas fácilmente, utilizando herramientas como PhoneGap, Titanium o CocoonJs.

Lenguaje de programación.
Para programar en HTML5 Canvas sólo es necesario saber programar en javascript, un lenguaje con varios años de rodaje, fácil de aprender y con extensa documentación accesible en la web.

Frameworks.
Hay muchos framework para HTML5 Canvas que facilitan el trabajo manual y proveen al desarrollador con muchas herramientas para gestionar la carga de assets, animaciones, efectos visuales y de sonido, interacción con mouse y teclado, entre otras.
Dentro de los frameworks más conocidos se encuentran Phaser, ImpactJs, CreateJs, Panda, ThreeJs, PlayCanvas, etc.

En las siguientes entregas detallaré cómo dibujar, animar y cargar imágenes en HTML5 Canvas.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">