HTML5 Animación en canvas

Para hacer un animación en HTML5 Para dibujar efectos de animación de imágenes en canvas, debe dibujar cada imagen del cuadro y luego transicionar de un cuadro a otro en un tiempo muy corto para formar un efecto de animación.

Ejemplo en línea

Para dibujar una animación en HTML5Para dibujar una animación en el lienzo, debe dibujar y redibujar los cuadros de animación en el lienzo. Debe hacerlo muy rápidamente para que muchos imágenes se vean como una animación.
Para obtener el mejor rendimiento de la animación, requestAnimationFrame utiliza una función de devolución de llamada en el objeto window. Puede llamar a esta función y pasarle como parámetro otra función que se llamará cuando el navegador esté listo para dibujar el siguiente cuadro de animación.
Cuando el navegador está listo para dibujar el siguiente cuadro, puede activar la aceleración de hardware para la animación y coordinar el redibujo de cuadros con otras actividades de redibujo en el navegador, mediante la señal del navegador a la aplicación. En comparación con la temporización del dibujo de cuadros de animación utilizando la función setTimeout() en JavaScript, la experiencia general debería ser mucho mejor.
Este es un ejemplo de código:

function animate() {
　　　　reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start =　+new Date();
　　　callback(start);
　　　finish =　+new Date();
　　　self.timeout =　1000/60　-　(terminar　-　start);
　　}, self.timeout);
　});
　　　　reqAnimFrame(animate);
　　　　draw();
}

La función animate() primero obtiene una referencia a la función requestAnimationFrame(). Note que este nombre puede variar en diferentes navegadores. Establece la variable reqAnimFrame como todos estos posibles valores de función que no son null.
Segundo, la función reqAnimFrame() llama a la función, pasando animate() como parámetro. Por lo tanto, cuando el navegador esté listo para dibujar el siguiente cuadro, llamará a la función.
Tercero, la función animate() llama a la función draw(). draw() no se muestra en el ejemplo anterior. Lo que debería hacer es, primero limpiar el lienzo (o la cantidad de lienzos que necesiten ser limpiados), y luego dibujar el siguiente cuadro de la animación.
En el ejemplo anterior, se omite un aspecto: animate() debe llamar a una función una vez para iniciar la animación. De lo contrario, requestAnimationFrame() nunca llamará a esta función y la animación nunca comenzará.
Este es un ejemplo de animación de un solo rectángulo en el lienzo:

El código para la animación de canvas se muestra a continuación:

<canvas id="ex1" width="500" height="170" style="border:　1px sólido #cccccc;">
HTML5　No se admite el canvas
</canvas>
<script>
var x = 0;
var y =　15;
var speed =　5;
function animate() {
reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start =　+new Date();
　　　callback(start);
　　　finish =　+new Date();
　　　self.timeout =　1000/60　-　(terminar　-　start);
　　}, self.timeout);
　});
reqAnimFrame(animate);
x　+= speed;
if(x <= 0 || x >=　475{
speed =　-speed;
}
draw();
}
function draw() {
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.clearRect(0, y,　500,　170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y,　25,　25);
}
animate();
</script>