En este tutorial aprenderemos a realizar la animación simple de un logo utilizando el elemento canvas de HTML5.

Para realizar gráficos nativos dentro del navegador HTML5 nos brinda dos opciones, una para dibujos en mapa de bits y otra para gráficos vectorizados.

Como se sabe siempre existen estas dos tendencias, desde la dupla Corel Photo Paint y Corel Draw hasta los ya bastantes populares en la actualidad en el diseño gráfico Photoshop e Illustrator. En HTML5 encontramos los elementos "canvas" (mapa de bits) y "svg" (vectores).

En esta oportunidad exploraremos el elemento canvas. El elemento canvas posee 4 tipos de contexto:

• 2d: Guía para la creación de objetos representados en dos dimensiones.
• webgl: Con el cual puedes crear representaciones en tres dimensiones. Solo disponible a navegadores que soporten WebGL en su version 1 (OpenGL ES 2.0).
• webgl2: Con el cual puedes crear representaciones en tres dimensiones. Solo disponible a navegadores que soporten WebGL en su version 2 (OpenGL ES 3.0).
• bitmaprenderer: Con el cual puedes crear mapas de bits especiales para imágenes.

En este ejemplo utilizaremos el contexto 2d para la realización del ejercicio.Canvas es un elemento que crea un recuadro o lienzo en el cual se puede graficar, mediante el uso de coordenadas como las del plano cartesiano que alguna vez todos vimos, pero con la dirección del eje "y" invertida.

Mientras las coordenadas de un cartesiano se incrementan hacia arriba y a la derecha, en un lienzo canvas las coordenadas se incrementan hacia abajo y a la derecha.

Para iniciar crearemos un documento con la estructura básica de HTML y agregaremos el elemento canvas, con un ancho y alto definido (en este caso coincidirá con las medidas de nuestra imagen de fondo):

Utilizando estilos CSS alineamos nuestro lienzo en el centro y le daremos un color negro al fondo, para resaltarlo.

canvas {
    display: block;
    margin: auto;
    align: center; 
}
body {
    background-color: black;
}

Con esto hemos concluido con la escritura de código HTML y CSS y es el turno de JavaScript, para esto crearemos las variables que contienen a nuestro lienzo.En JavaScript configuramos nuestro lienzo base con las siguientes lineas de código.

var cnv = document.getElementById("plano");
var ctx = cnv.getContext('2d');

Como vimos anteriormente el elemento canvas, posee 4 tipos de contexto, como nuestra animacion solo sera en 2 dimensiones especificamos como parámetro "2d".

Insertamos la imagen de fondo a nuestro lienzo en la ubicacion inicial (esquina superior-izquierda)

var img = new Image();
img.src = 'http://i63.tinypic.com/rvm0lh.png';
img.onload = function() {ctx.drawImage(img,0,0);}

Con la función drawImage del lienzo o contexto ctx, siempre y cuando esta haya sido cargada por el navegador, es por ello que se encuentra dentro de la función img.onload, que realiza el código interno una vez cargada la imagen.

See the Pen Ojos2 by NestorPlasencia (@NestorPlasencia) on CodePen.

2. Como se observa en nuestra imagen, los ojos no contienen iris, estos los crearemos con un par de círculos graficados mediante las funciones que nos brinda canvas, para esto primero definiremos la ubicacion donde queremos graficar los iris.

var coX = [153,234];
var coY = 110;

Con la función setInterval(function(){dibujar();},60); se dibujará nuestro canvas cada 60 milisegundos. Ahora analizaremos linea por linea la función dibujar:

Esta primera función realiza el borrado de todo nuestro lienzo, recordemos que para realizar una animación es necesario eliminar el fotograma anterior:

ctx.clearRect(0,0,cnv.width,cnv.height);

Volvemos a graficar la imagen de fondo:

ctx.drawImage(img,0,0);

La función begin.Path(); nos indica el inicio de un trazo, similar a cuando posicionamos un lápiz en un papel:

ctx.beginPath();

En la función arc() se realiza el trazo del círculo, el primer parámetro es la posición en x de nuestro lienzo, el segundo parámetro análogamente la posición y, el tercer parámetro es el radio del círculo, los dos últimos parametros nos indican la abertura del círculo, en esta ocasión es un círculo completo por lo tanto es desde 0 a 2π:

ctx.arc(coX[i],coY,12,0,2*Math.PI);

Se cierra el trazo con la función closePath(); :

ctx.closePath();

La función stroke(); específicamente indica que se realice el trazado de lo antes especificado:

ctx.stroke();

Con las funciones fill(); lo que se logra es rellenar el círculo de un color específico para nuestro caso de color negro:

ctx.fillStyle = "#000";
ctx.fill();

See the Pen Ojos1 by NestorPlasencia (@NestorPlasencia) on CodePen.

3. Para animar el iris de cada ojo utilizaremos un script para obtener la posición del mouse dentro de nuestro navegador y lo guardaremos en las variables tempX y tempY, este script utiliza los eventos de mousemove, para obtener la posición del mouse.

var tempX = 0, tempY = 0;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY; 
function getMouseXY(e) {
  tempX = e.pageX;
  tempY = e.pageY; 
  if (tempX < 0){tempX = 0;}
  if (tempY < 0){tempY = 0;} 
  return true;
}

Mediante proporcionalidades modificamos los valores de las coordenadas x e y del centro de nuestros iris.

coX = [130+tempX/document.body.scrollWidth*30,
210+tempX/document.body.scrollWidth*30];
coY = 50+tempY/document.body.scrollHeight*100;

Las propiedades document.body.scrollWidth y document.body.scrollHeight son los valores de los píxeles disponibles en el navegador.

Como resultado se obtiene que los iris de nuestros ojos se mueven en función del movimiento del mouse como vemos en el siguiente ejemplo:

See the Pen Ojos0 by NestorPlasencia (@NestorPlasencia) on CodePen.

Si deseas aprender más sobre las funcionalidades del elemento canvas de HTML5 no puedes perderte nuestro Curso APIs de HTML5, para llevar tu código al siguiente nivel.