Cómo utilizar la plataforma Canvas: pasos para una animación básica en un sistema solar.

Canvas es un elemento HTML el cual puede ser usado para dibujar gráficos usando scripts (normalmente JavaScript).

Este puede, por ejemplo, ser usado para dibujar gráficos, realizar composición de fotos o simples (y no tan simples) animaciones. Las imágenes a la derecha muestran algunos ejemplos de implementaciones <canvas>  las cuales se verán en un futuro en este tutorial.

Canvas  fue introducido primero por Apple para el Mac OS X Dashboard y después implementado en Safari y Google Chrome. Navegadores basados en Gecko 1.8, tal como Firefox 1.5, que también soportan este elemento. El <canvas> es un elemento parte de las especificaciones de la WhatWG Web applications 1.0 mejor conocida como HTML5.

Cómo utilizar la plataforma Canvas.

En este tutorial se describe cómo usar el elemento <canvas> para dibujar gráficos en 2D, empezando con lo básico.



Los ejemplos le proveerán mayor claridad a las ideas que pueda tener referentes al canvas, así como los códigos que necesita para crear su propio contenido.

El elemento <canvas> está incluido en las aplicaciones Web 1.0 de WhatWG Web, también conocido como HTML 5.

Las aplicaciones de Mozilla han implementado <canvas> a partir de Gecko 1.8 (es decir, Firefox 1.5).

El elemento fue presentado originalmente por Apple para OS X Dashboard y Safari. Internet Explorer soporta <canvas> desde la versión 9 en adelante, para versiones anteriores de IE, una página web puede añadir la compatibilidad de forma eficaz incluyendo un script que se puede descargar desde el proyecto Explorer Canvas de Google. Google Chrome y Opera 9 también soportan <canvas>.

Leer también: Cómo utilizar la plataforma Canvas: introducción y especificaciones básicas del PC.

Pasos para una Animacion Básica.

Ya que estamos usando JavaScript para controlar los <canvas> , tambien es muy facil hacer animaciones (interactivos). En este capitulo veremos como hacer algunas animaciones basicas.
Probablemente la mayor limitacion es, que una vez que la forma se dibuja, quede asi.

Y si tuvieramos que moverla tendriamos que redibujar todo y todo lo que fue dibujado antes. Esto tomaria mucho tiempo en redibujar (los marcos y las figuras complejas) y esto va a depender en gran medida de la velocidad a la que corra tu computadora.

Estos son los pasos que necesitas para dibujar un marco:

Limpiar el Canva.

A menos que la forma que dibujes llene por completo el canva (Por Ejemplo una imagen de fondo), necesitas limpiar cualquier forma que hallas dibujado previamente. Esto facilemente podrias hacerlo usando el metodo clearRect().

Guardar el estado del Canva.

Si tu modificas cualquier ajuste (como un estilo, transfomacion, etc.) que afecte estado del canva y quieres asegurarte que el estado original se use cada vez que dibujes un marco, entonces necesitas guardar el estado original.

Dibujar formas animadas.

Este es le paso donde haces el renderizado del marco actual.

Restaurar el estado del Canva.

Si tu has guardado el estado del canva, debes restaurarlo antes de dibujar un nuevo marco.

Controlar una Animacion.

Para crear formas en en los canvas usamos los metodos de canvas o hacemos el llamando a funciones personalizadas. En un caso normal, nosostros solo vemos que el resultado aparece cuando el el script se ha ejecutado. Por ejemplo, no es posible hacer una animacion desde un bucle for.

Esto significa que necesitamos una manera de ejecutar nuestras funciones de dibujo en un período de tiempo.  Hay 2 formas para controlar una animacion como esta.

Actualizaciones Programadas.

Primero window.setInterval(), window.setTimeout(), y window.requestAnimationFrame() son funciones que pueden ser usadas para llamar una funcion especifica en un periodo de tiempo establecido.

setInterval(function, delay)
Ejecuta una funcion especificada por function cada delay milisegundos.
setTimeout(function, delay)

Ejecuta una funcion especificada por function dentro de delay milisegundos.
requestAnimationFrame(callback)

Comunica al navegador que  deseas iniciar una animacion y requieres que el navegador llame a las funciones especificas para actualizar la misma antes de la siguiente escena.

Cómo utilizar la plataforma Canvas: pasos para una animación básica en un sistema solar.Haz Clic para Twittear

Si no quieres ninguna interaccion del usuario puedes usar la funcion setInterval() que repite la ejecucion del codigo suminsitrado. Si lo que queremos es hacer un juego, nosotros usariamos los eventos del mouse o el teclado para controlar la animacion y usariamos setTimeout(). Al establecer los EventListener, capturamos cualquier interaccion del usuario y ejecutamos nuestras funciones de animacion.

En los siguiente ejemplo,usaremos el metodo para controlar animaciones window.requestAnimationFrame(). El metodo requestAnimationFrame provee formas amigables y mas eficientes  para animar llamando cada marco de animacion cuando el sistema esta listo para dibujar. Las retrollamadas son usualmente 60 veces por segundo y podria ser reducido a menor periodo cuando se corre en un segundo plano.

Para más informacion acerca de los ciclos de animacion, especialmente para juegos, ver el Articulo Anatomia de un video juego en nuestra GameZona de desarrollo de Juegos.

Un sistema solar animado.

Este ejemplo animado es un pequeño modelo de nuestro sistema solar

var sun = new Image();

var moon = new Image();

var earth = new Image();

function init(){

  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';

  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';

  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';

  window.requestAnimationFrame(draw);

}

function draw() {

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

  ctx.globalCompositeOperation = 'destination-over';

  ctx.clearRect(0,0,300,300); // clear canvas

  ctx.fillStyle = 'rgba(0,0,0,0.4)';

  ctx.strokeStyle = 'rgba(0,153,255,0.4)';

  ctx.save();

  ctx.translate(150,150);

  // La tierra

  var time = new Date();

  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );

  ctx.translate(105,0);

  ctx.fillRect(0,-12,50,24); // Shadow

  ctx.drawImage(earth,-12,-12);

  // La luna

  ctx.save();

  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );

  ctx.translate(0,28.5);

  ctx.drawImage(moon,-3.5,-3.5);

  ctx.restore();

  ctx.restore();

  

  ctx.beginPath();

  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit

  ctx.stroke();

  ctx.drawImage(sun,0,0,300,300);

  window.requestAnimationFrame(draw);

}

init();

fuente: Canvas

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog: