HTML5 Canvas 制作动画

在HTML5 canvas中绘制图像动画效果，你需要绘制出每一帧的图像，然后在一个极短的时间内从一帧过渡到下一帧，形成动画效果。

在线示例

要在HTML5画布上绘制动画，您需要在画布上绘制和重新绘制动画的帧。您需要非常快地这样做，以使许多图像看起来像动画。
为使动画获得最佳性能，requestAnimationFrame 在window对象上使用回调函数。您可以调用此函数，并在浏览器准备绘制动画的下一帧时将要调用的另一个函数作为参数传递。
当浏览器准备绘制下一帧时，通过让浏览器向应用程序发出信号，浏览器可以为动画启用硬件加速，并与浏览器中的其他重绘活动协调帧重绘。与使用JavaScript中的setTimeout() 函数对动画帧的绘制进行计时相比，总体体验应该要好得多。
这是一个代码示例:

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 - (finish - start);
  }, self.timeout);
 });
    reqAnimFrame(animate);
    draw();
}

animate()函数首先获得对该requestAnimationFrame() 函数的引用。请注意，此函数在不同的浏览器中可能具有不同的名称。将该变量 reqAnimFrame设置为所有这些不为null的可能函数。
其次，reqAnimFrame()调用函数，将animate()函数作为参数传递。因此，当浏览器准备绘制下一帧时，将animate()调用该函数。
第三，animate()函数调用draw()函数。draw() 上例中未显示该功能。它应该做的是，首先清除画布（或需要清除的画布数量），然后绘制动画的下一帧。
上例中未显示的另一件事是，animate()应调用一次函数以启动动画。如果没有，requestAnimationFrame()则永远不会调用该函数，并且永远不会开始动画循环。
这是一个在画布上移动单个矩形的动画示例:

canvas动画实现的代码如下:

<canvas id="ex1" width="500" height="170" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</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 - (finish - 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, 0, 500, 170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y, 25, 25);
}
animate();
</script>