Canvas es un elemento de HTML 5 que permite representar gráficos dinámicos a traves de javascript en un área determinada.

¿Qué cosas se pueden llegar ha realizar con canvas?

Desde las representaciones gráficas más simples (como lo es este ejemplo) hasta los videojuegos más complejos. Ver un ejemplo de videojuego: Galactic Plunder Game

Para ello utilizamos la etiqueta “canvas” a la cual le especificamos un área determinada:


Este texto será desplegado si tu navegador no soporta HTML 5

Primero determinamos el ancho y alto del canvas, también especificamos un identificador (id) con el que haremos referencia desde javascript. Entre la etiqueta de apertura y de cierre colocamos un texto que se visualizará en los navegadores que no sean compatibles con HTML 5 y por ende con la etiqueta canvas.


Analicemos ahora nuestro código javascript responsable de dibujar y desplazar estas lindas cajitas en el escenario (canvas).

function init(){
	var time = setInterval(drawCanvas,10);
	var wcanvas = 300;
	var hcanvas = 200;
	
	var canvas = document.getElementById("canvas").getContext("2d");
	
	var red = new Object();
	red.x = 0;
	red.y = 90;
	red.speed = 1;
	red.style = "rgba(255,0,0,1)";
	red.w = red.h = 20;
	
	var green = new Object();
	green.x = 90;
	green.y = 0;
	green.speed = 2;
	green.style = "rgba(0,255,0,1)";
	green.w = green.h = 20;
	
	function drawCanvas(){
		canvas.clearRect(0,0,300,200);
		
		canvas.fillStyle = red.style;
		if(red.x >= wcanvas - red.w/2){
			red.x = 0 - red.w;
		}else{
			red.x += red.speed;
		}
		red.shape = canvas.fillRect(red.x,red.y,red.w,red.h);
		
		canvas.fillStyle = green.style;
		if(green.y >= hcanvas - green.h/2){
			green.y = 0 - green.w;
		}else{
			green.y += green.speed;
		}
		green.shape = canvas.fillRect(green.x,green.y,green.w,green.h);
		
		canvas.save();
	}
}

En primer lugar es importante aclarar que nuestro código javascript forma parte del contenido de la función “init“; ¿Poqué que sucede esto?.. por la simple razón de que ese código debiera ser ejecutado una vez se haya cargado el DOM del HTML y por consiguiente haber cargado la etiqueta canvas. De lo contrario daría un error al no encontrar el lugar donde hacer la representación gráfica.

< body onload="init()" >
...

Uno de los métodos para asegurarnos de esto es llamar a la función “init” con el método “onload” dentro de la etiqueta “body” de nuestro HTML.

Ahora veamos cual es el propósito de cada una de las líneas de código que hacen a este pequeño ejemplo de animación en canvas.

var time = setInterval(drawCanvas,10);
var wcanvas = 300;
var hcanvas = 200;

Definimos una variable “time” a la cual le asignamos un intervalo de tiempo para ejecutar cada 10 milisegundos una función encargada de re dibujar nuestro lienzo (canvas), eso significa que el movimiento que observamos es la suma de cuadros o representaciones que hacemos de nuestros dibujos (cajas) ubicadas en las distintas posiciones en un intervalo de tiempo dado.
wcanvas” y “hcanvas” es la zona que elijo para hacer la representación; la misma equivale al ancho y alto del canvas.

var canvas = document.getElementById("canvas").getContext("2d");

Con el método “getContext(“2d”)” referenciando al elemento “canvas” habilito el espacio para poder dibujar formas 2D.

var red = new Object();
red.x = 0;
red.y = 90;
red.speed = 1;
red.style = "rgba(255,0,0,1)";
red.w = red.h = 20;
	
var green = new Object();
green.x = 90;
green.y = 0;
green.speed = 2;
green.style = "rgba(0,255,0,1)";
green.w = green.h = 20;

Posteriormente voy a crear dos objetos (las dos cajas); cada uno de esos objetos almacenarán las propiedades de las cajas; su color, ancho y alto, velocidad y posición. De esta manera administro cada objeto de manera independiente para posteriormente representarlo en el canvas.

function drawCanvas(){
	canvas.clearRect(0,0,300,200);
    ...
}

Veamos ahora que hay dentro de la función que es ejecutada cada 10 milisegundos por setInterval.
Lo primero que hacemos es borrar el lienzo para hacer una nueva representación; si no fuse así, se sobre imprimiría cada nueva posición de las cajas.

function drawCanvas(){
	...
    canvas.fillStyle = red.style;
    red.shape = canvas.fillRect(red.x,red.y,red.w,red.h);
	if(red.x >= wcanvas - red.w/2){
		red.x = 0 - red.w;
	}else{
		red.x += red.speed;
	}
		
	canvas.fillStyle = green.style;
    green.shape = canvas.fillRect(green.x,green.y,green.w,green.h);
	if(green.y >= hcanvas - green.h/2){
		green.y = 0 - green.w;
	}else{
		green.y += green.speed;
	}
      ...
}

Ahora aplicamos el color de cada una de las cajas utilizando el método “fillStyle” e igualándolo al color que le asignamos a cada objeto. Posteriormente las representamos con el método “fillRect” pasando como parámetros la posición X, posición Y, ancho y alto para cada una de las cajas.

La lógica de animación difiere a la que se utiliza en Flash, aquí lo que se hace es una sumatoria de representaciones dónde la profundidad de cada elemento depende del órden en el que es impreso en el canvas.

Luego aparece un un condicional que revisa la nueva posición de cada caja para incrementar la posición con la velocidad (speed) o bien hacer una reposición de las mismas y así hacerlas voler a entrar en el escenario.

function drawCanvas(){
	...
	canvas.save();
    ...
}

Para terminar, lo que hacemos es guardar el estado del contexto 2D que acabamos de crear.

Hasta aquí hemos visto la construcción de una animación simple; esta en nosotros tomarlo como base e ir añadiéndole complejidad e interactividad para obtener resultados más interesantes.

Les recomiendo visitar la sección canvas de W3Sshool para seguir ahondando en el tema.

Descargar animación del ejemplo

¡Hasta pronto!

Categoría: Tutoriales, Web

Publicado por: negro

Artículos Relacionados

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>