在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?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,?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>
HTML5 Canvas 转换 ? ?HTML5 Canvas 像素处理
查看更多关于HTML5 Canvas 制作动画的详细内容...