realizando una animación con el objeto canvas de HTML5
Vamos a realizar una pequeña animación con el objeto canvas de HTML5. Para ello, vamos a empezar, definiendo el objeto canvas. En resumen, se trata de delimitar el lienzo en el que vamos a dibujar con la librería canvas.Para ello, haremos lo siguiente:
<canvas id="cloud" width="300" height="300"></canvas>
Con esto, lo que hemos conseguido ha sido delimitar una area de dibujo de 300x300, y que posteriormente podemos adaptar y modificar con CSS, y dentro de nuestra pizarra, he añadido un contenedor, donde ubicaré la animación, este caso, una nube.
Canvas, es una librería que permite ser manajeda a través de javascript, por lo que vamos a ponernos manos a la obra...
//Generamos imagenes
var moon = new Image();
moon.src = "img/cloud.png";
Lo primero ha sido crear una imagen, en este caso es una nube, que vamos a mover por la pantalla. Esto mismo podríamos hacerlo dibujando un círculo o cualquier otra figura geométrica, tema que ya veremos en otro artículo futuro.
var canvas = document.getElementById("cloud");
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(cloud, x, 0);
if((x > 100) || (x < 0)){
next = -next;
}
x += next;Vamos por partes:
- Lo primero es asociar la variable canvas, con el id "cloud".
- En la siguiente linea, indicamos que va a ser un dibujo en 2 dimensiones.
- La siguiente linea, lo que hace es borrar la imagen, para ello dibuja un rectángulo de las dimensiones de nuestra imagen, y la borra, ocupando su lugar.
- Y por último, dibujamos la nube. Como se puede ver, tiene tres parámetros: cloud, x y 0. El primero se refiere a la imagen que creamos anteriormente, el segundo es la coordenada X y el tercero la coordenada Y. En este caso, la coordenada Y va a ser cero, porque el movimiento va a ser horizontal, y a la coordenada X, le hemos puesto un valor de una variable, cuyo valor iremos modificando con el condicional siguiente.
- Definimos que x debe estar entre 100 y 0, y que en cada ciclo se incremente, hasta que llegue a 100 o a 0, y entonces o vuelva a sumar (en el caso de 0) o empiece a restar, en el caso de que estemos en 100.
El resultado final sería algo como esto:
<script>
//Generamos imagenes
var moon = new Image();
moon.src = "img/cloud.png";
var canvas = document.getElementById("cloud");
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(cloud, x, 0);
if((x > 100) || (x < 0)){
next = -next;
}
x += next;
</script>
<canvas id="cloud" width="300" height="300"></canvas>
Obviamente, es necesario crear un evento que accione el script, por ejemplo, meterlo en una función, y en el body poner algo así:
<body onload="funcion();">
Si estamos usando jquery, o similar, podemos intentar algo así:
$(document).ready(function(){
var cloud = new Image();
cloud.src = "img/cloud.png";
var canvas = document.getElementById("cloud");
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(cloud, x, 0);
if((x > 100) || (x < 0)){
next = -next;
}
x += next;
}
});Por lo que un ejemplo a pleno rendimiento (ejemplo 1) sería:
<script>
var x = 0;
var next = 1;
var cloud = new Image();
cloud.src = "img/cloud.png";
function drawCloud(){
var canvas = document.getElementById("cloud");
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(cloud, x, 0);
if((x > 100) || (x < 0)){
next = -next;
}
x += next;
}
$(document).ready(function(){
//Generamos imagenes
setInterval(drawCloud, 100);
})
</script>
<canvas id="cloud" width="600" height="300"></canvas>
Hay que tener en cuenta, que para que se realice la animación, hay que refrescar la pantalla, y para eso utilizamos setInterval, y le asignamos 100, para que se refresque la pantalla cada 100 milisegundos.
El ejemplo 1, tal cual está escrito arriba, daría este resultado: