Canvas de HTML5: Introducción

Damos un repaso a las características del elementos canvas introducido en HTML5, que permite dibujar gráficos en el navegador web.

El nuevo elemento canvas de HTML5 es una herramienta que crea un área de trabajo donde pueden realizarse diferentes creaciones, principalmente de dibujo.

Su maquetación en HTML5 es de por sí muy simple. Pensemos en una pizarra, un cuadrilátero dentro del cual se realizan gráficos a través de scripts Java u otra aplicación. Éste es el aspecto clave, la etiqueta crea el entorno, pero los resultados dependerán de la eficiente utilización de las funciones gráficas que quedan encuadradas en el escenario canvas HTML5.

La Etiqueta <canvas> de HTML5

La maquetación de esta nueva etiqueta multimedia de HTML5 es, como queda dicho, muy sencilla:

<canvas id="miAmbienteCanvas" width="600" height="400"> 
	<p>Lástima, este navegador no acepta canvas</p>
</canvas>

En este caso, se declara la etiqueta canvas y se da un nombre al área creada mediante el atributo id. Este nombre servirá para que cualquier función gráfica haga referencia al rectángulo definido y se ubique dentro de él.

Además de la identificación, canvas se estructura con dos atributos únicamente, width y height, que dan las dimensiones de ancho y alto del cuadrilátero. En caso de omitirlos, los valores por defecto son 300px y 150px, respectivamente.

El espacio entre el comienzo y el cierre de la etiqueta canvas está destinado a cualquier mensaje o gráfico que indique al usuario que su navegador no soporta el elemento. Como se ve, el ejemplo emite un mensaje en ese caso. Las funciones gráficas se ubicarán debajo de </canvas> y harán mención al id de la etiqueta (el nombre que le hemos asignado).

Canvas de HTML5 y Java Script

La tarea gráfica en sí se realiza a través, en este caso, de scripts codificados en JavaScript. Para ello, lo primero que debemos realizar es adquirir el contexto canvas a través de las sentencias getElementById y getContext. Aquí haremos referencia al nombre de nuestro espacio canvas:

<script type="text/javascript">
	var canvas = document.getElementById('miAmbienteCanvas');
	var dib = canvas.getContext('2d');
	// Aquí ingresar las funciones gráficas JavaScript
</script>

A partir de este punto, el ambiente “2d” te permitirá dibujar a través de una serie de funciones similares a las que utilizan las diferentes aplicaciones gráficas más conocidas, desde la creación de figuras simples hasta el sombreado, relleno y realizaciones más complejas. La definición del “id”, que hemos utilizado en este caso, servirá para hacer referencia al contexto gráfico en cada una de las funciones.

Dibujo de figuras sencillas con canvas de HTML5

El dibujo de un rectángulo se realiza a través de la función strokeRect, la cual tiene esta forma:

strokeRect(x,y,ancho,alto)
donde x e y son las coordenadas que ubicarán la figura en el espacio correspondiente, y los otros dos parámetros nos indican el tamaño del cuadrilátero. Así quedaría este sencillo ejercicio:

<canvas id="miAmbienteCanvas"> 
<p>Lástima, este navegador no acepta canvas</p>
</canvas>

<script type="text/javascript">
var canvas = document.getElementById('miAmbienteCanvas');
var dib = canvas.getContext('2d'); 
dib.strokeRect(100,100,50,50);
</script> 

Si lo que deseamos dibujar es un rectángulo relleno de algún color, la función es fill Rect.

fillRect(x,y,ancho,alto)

Aquí va el ejemplo completo, con los dos rectángulos en diferentes posiciones.

<canvas id="miAmbienteCanvas"> 
<p>Lástima, este navegador no acepta canvas</p>
</canvas>

<script type="text/javascript">
var canvas = document.getElementById('miAmbienteCanvas');
var dib = canvas.getContext('2d');

// Dibujar un rectángulo y un rectángulo relleno
dib.fillStyle = '#000000'; 
dib.fillRect(100, 100, 120, 40)
dib.strokeRect(0, 0, 120, 40)
</script>

Como puede verse, una función anterior, fill Style, determina el color de relleno.

Dibujo de Líneas y su Combinación

Se pueden dibujar líneas y además unirlas para realizar diferentes figuras. La función lineTo tiene la siguiente forma:

lineTo (x, y)

donde x e y son las coordenadas del punto final de la recta. El punto de origen depende de la posición anterior, determinada por el final de otra línea o por el movimiento realizado por una función moveTo, que establece una posición sobre la pizarra canvas. En el ejemplo siguiente vemos estas funciones en la práctica, para dibujar un triángulo sólido.

<canvas id="miAmbienteCanvas"> 
<p>Lástima, este navegador no acepta canvas</p>
</canvas>

<script type="text/javascript">

var canvas = document.getElementById('miAmbienteCanvas');
var dib = canvas.getContext('2d');

// Dibujo de líneas consecutivas para realizar un triángulo relleno

dib.beginPath();
dib.moveTo(25,25);
dib.lineTo(105,25);
dib.lineTo(25,105);
dib.fill();

</script>

Así, mediante la gran variedad de funciones que ofrece Java Script y su integración con HTML5, pueden dibujarse todo tipo de figuras y, mediante la programación adecuada, moverlas sobre la pantalla.

Las funciones JS y la creatividad del programador pueden lograr resultados muy complejos como los que puedes ver en las páginas cuyo enlace te damos a continuación. Si deseas echar una ojeada a la manera en que se estructuran estas maravillas, no tienes más que revisar el código fuente a través del navegador que utilices.

• http://www.effectgames.com/demos/canvascycle/
• http://gyu.que.jp/jscloth/