Animaciones

El <canvas> introducido por las especificaciones HTML 5 es la base para los juegos web online que sustituyen a los juegos Flash, en vias de esxtinción. También sustituyen perfectamente a los desaperecidos applets, aplicaciones java para web muy utilizados en demos y aplicaciones educativas como simulaciones en física o matemática.

La animación exige un conocimiento básico de Javascript, pues este es el lenguaje que habitualmente se utiliza en las páginas web interactivas. Básicamente una animación es tan solo una sucesión de imágenes que se muestran una tras otra cada cierto intervalo de tiempo. Así de fácil. Trasladado a lo que sabes del canvas sería como redibujar un canvas cada cierto intervalo de tiempo.

En Javascript se venía usando la función setInterval() que permite ejecutar un código cada cierto tiempo. Este código se encarga de redibujar el canvas para ir mostrando los diferentes fotogramas de la animación.

Pero existe otro método más eficiente y con resultados de más calidad, pues deja al explorador gestionar los tiempos de procesador dedicados a ejecutar la animación, entre otras cosas. Se trata del método requestAnimationFrame(), este método del objeto window, que lanza al explorador una petición para redibujar la ventana y el explorador lo hará cuando sea posible (este refresco de pantalla suele ser de 60 veces por minuto). Solo lleva un argumento: el nombre de la función que deba ejecutarse para actualizar la animación.

Cuando se ejecuta window.requestAnimationFrame(funcionLlamada) se devuelve un identificador para identificar la llamada, o sea, la animación. Cada vez que el explorador refresca la pantalla (unas 60 veces por segundo) se ejecuta la funcionLlamada con un argumento: el instante en que se ejecuta (una medida de tiempo en milisegundos). Dentro de esa función se modifica el canvas (se cambia de fotograma) y se muestra, volviendo a ejecutar la llamada a requestAnimationFrame() si quieres seguir la animación o a window.cancelAnimationFrame(idAnim) si deseas finalizar la animación.

Un ejemplo te lo dejará totalmente claro:veras que se va dibujando un circulo relleno mediante un arco que en cada paso va aumentando hasta completar los 360º del círculo. He puesto un botón para iniciar la animación a mano.

<script>
var idAnim, grados=0, lapiz;
function animar(time)
{
	lapiz.moveTo( 200, 200);
	lapiz.arc(200, 200, 50, 0, grados*Math.PI/180);
	lapiz.fill()
	grados +=4;     //cada llamada aumento el ángulo del arco en 4º 
	if (grados<= 360)
		idAnim = window.requestAnimationFrame(animar);  //Vuelvo a pedir refrescar canvas
	else
		window.cancelAnimationFrame(idAnim);    //Finaliza la animación
}
function iniciar()
{
	lapiz = document.getElementById("mipapel").getContext("2d"); 
	idAnim = window.requestAnimationFrame(animar);
}
</script> 
<canvas id="mipapel" width="400" height="500"></canvas>
<input type="button" value=" Iniciar " onclick ="iniciar()">
Prueba este código

Lo he puesto todo elo el cuerpo de la página, pero normalmente los scripts los pondrás en la sección HEAD y la animación puedes iniciarla con un botón o con un evento, por ejemplo <body onlad="iniciar()"> iniciaría la animación al cargar la página.

Como ves la función que es llamada en la animación (animar() en este ejemplo) no admite parámetros, por lo que se necesitan variables globales o trabajar con objetos. En este otro ejemplo uso el parámetro tiempo

<script>
var idAnim, log, lapiz, iniAnim;
function animar(time)
{
	var dt = Math.round((time - iniAnim)/1000);
	lapiz.clearRect(0, 0,100,100)	
	lapiz.font = "italic 60px Arial";
	lapiz.fillText( dt, 10,50);
	if (dt < 100)
		idAnim = window.requestAnimationFrame(animar);  //Vuelvo a pedir refrescar canvas
	else
		window.cancelAnimationFrame(idAnim);    //Finaliza la animación
}
function iniciar()
{
	lapiz = document.getElementById("mipapel").getContext("2d"); 
	iniAnim = window.performance.now();     //instante de inicio de la animación
	idAnim = window.requestAnimationFrame(animar);
}
</script> 
<canvas id="mipapel" width="400" height="200"></canvas>
<p></p>
<input type="button" value=" Iniciar " onclick ="iniciar()">
Prueba este código
por ejemplo aquí tienes un sistema solar animado , otro sistema solar aplicando las ecuaciones de Kepler (algo más realista) y un juego de artillería donde se aplica todo lo visto en estas páginas.