使用Canvas实现动画效果
这是动手开发一个HTML5赛车小游戏系列文章。你可以查看前一篇内容：
这里我们使用Canvas开发这个游戏，而不是采用传统的DOM方式实现，虽然这个简单的游戏使用DOM也可以实现（甚至有可能更容易点）。但是Canvas可以更加方便的控制图片，功能更更加强大，因为你可以完全按照自己的想法进行绘制和操作图像。
Canvas是HTML5中新加入的标签。它定义了一个图形，可以是图表或任何内容，但是它只是一个容器，你必须使用JavaScript来进行绘制图形。Canvas并不是为动画准备的，但是你可以使用它来实现动画效果。
前面介绍过在HTML中如何使用JavaScript实现DOM的动画效果：
其实使用Canvas中的动画实现某种程度也利用了同样的思想。快速的定时的改变所绘制的图形的位置。当然Canvas上所绘制的图形不会自动消失，如果你不断的画图形会不断的重复出现在画布中，所以你需要在重绘之前清除画布，这样你得到的才是动画而不是动画的轨迹。
JavaScript中没有诸如sleep等阻塞的方法，所以我们需要使用setTimeout或setInterval来实现定时执行的功能。大部分现代浏览器中提供了一个新的方法requestAnimationFrame来代替普通的定时器，这是由FireFox首先实现的，虽然目前还不是标准，但是大部分现代浏览器中已经支持这个方法，你可能需要使用不同的前缀调用它，如：mozRequestAnimationFrame或webkitRequestAnimationFrame。这个方法类似setTimeout，它由浏览器自行判断执行的时机，当页面不可见时它会自动降频，以达到节约资源的目的。它是你实现动画的最佳选择。它的执行频率大于是每秒60次，因为这是浏览器刷新的极限，如果再高对浏览器来说就没有意义了。当然对于不支持的浏览器我们可以使用setTimeout或setInterval来代替，相信你可以很容易的实现类似功能。下面是一个兼容的写法：
window.requestAnimFrame = (function() {
oreturn window.requestAnimationFrame
o|| window.webkitRequestAnimationFrame
o|| window.mozRequestAnimationFrame
o|| window.oRequestAnimationFrame
o|| window.msRequestAnimationFrame || function() {
o//return setTimeout(arguments[0], 1000 / 60);
oreturn -1;
o} // return -1 if unsupported
})();
window.cancelRequestAnimFrame = (function() {
oreturn window.cancelAnimationFrame
o|| window.webkitCancelRequestAnimationFrame
o|| window.mozCancelRequestAnimationFrame
o|| window.oCancelRequestAnimationFrame
o|| window.msCancelRequestAnimationFrame || function() {
oreturn -1;
o} // return -1 if unsupported
})();
当然你还要熟悉一下Canvas绘图的API。
首先你需要获取一个画布的对象，然后通过画布对象的getContext()方法获取一个绘图上下文。这个方法接受一个字符串参数"2d"，这是目前你所能用的，当然还有其他的模式，比如WebGL，虽然已经被Chrome和FireFox所支持，但是MS的IE浏览器应该是不会支持了。通过这个绘图上下文你可以画线也可以画图形，可以描边路径也可以填充它，还可以直接绘制图片，或者直接操作图片数据等等。
网上有很多这方面的资料，这里就不多说了，文章的结尾我会给出一些参考资料。如果你对Canvas绘图不是很熟悉，MDN的Canvas教程将会是你的好选择。
这里我们做一个最简单的实例，让一个圆在画布上移动起来：
-
o
- 首先我们需要把一个方框画到画布上。点击查看示例：http://jsfiddle.net/mqVZ7/1/
- 接下来让我们每秒将小方块向右向下移动5个像素，并改变它的颜色。为了方便查看我们将小方块的透明度设置为.5。你会看到一串小方块运动的轨迹：http://jsfiddle.net/mqVZ7/2/
- 这并不是我们需要的动画效果，它绘制的是一个轨迹而不是动画，要想实现动画效果，我们需要在每帧的绘制之前清除画布的所有内容，当然你还可以只重绘需要的部分。这里我们重绘整个画布，为了运动更平滑我们将移动的距离改为1个像素：http://jsfiddle.net/mqVZ7/3/
o
o
好了我们实现了我们想要的效果。当然你同样可以使用前面用过的数学公式。先说到这，后面会继续跟大家讨论控制动画对象等内容。
引用内容：
转载请注明原文出处《使用Canvas实现动画效果》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。