HTML5 Canvas 教程：十二、动画
十二、动画 Animation
12.1清除画布内容 Clear Canvas
为了清除HTML5画布，可以使用clearRect()方法来清除画布位图。该方法的性能比清除画布的其他技术要好得多，比如重置画布的宽度和高度，或者销毁画布元素然后重新创建它。
代码说明：点击清除按钮清除画布。
以上代码演示了点击清除按钮，清除画布上的所有内容。
12.2动画帧 Animation Frame
要使用HTML5 Canvas创建动画，可以使用requestAnimFrame shim，它使浏览器能够确定动画的最佳FPS。对于每个动画帧，我们可以更新画布上的元素，清除画布，重新绘制画布，然后继续请求另一个动画帧。
以上代码演示了在画布上绘制一个矩形，并使矩形向右移动的动画。注意代码中的animate方法，该方法不断更新矩形的位置，并清除画布，将新的矩形绘制出来以实现矩形的移动。
12.3线性运动 Linear Motion
为了用HTML5画布创建线性运动动画，我们可以根据速度方程增加每个帧对象的x、y值以改变对象的位置，计算方式为：距离＝速度*时间（distance = velocity * time）。
这段代码的演示内容与上一段基本一致，不在赘述。
12.4加速度 Acceleration
为了用HTML5画布创建二次运动动画，我们可以为每帧增加对象的vx(水平速度)、vy(垂直速度)或vx和vy两者同时增加，然后根据加速度方程更新对象的位置，计算方法为：距离＝速度*时间+ 1/2 *加速度*时间^2（distance = velocity * time + 1/2 * acceleration * time^2）。
以上代码演示了在画布上创建一个垂直降落的矩形，并且在降落过程中有一定的加速度，请注意代码中与加速度有关的几项常量，可以试着将其改为更符合实际的重力加速度。
12.5振荡（往复）动画 Oscillation Animation
为了使用HTML5画布创建振荡往复动画，我们可以使用简单的谐波振荡方程来设置图形在每个帧的位置：
x(t) = 幅值*sin(t * 2PI/周期) + x0，（x(t) = amplitude * sin(t * 2PI / period) + x0）。
以上代码演示了在画布上绘制一个矩形，并使矩形进行振荡往复运动。
12.6动画的启动与停止 Start and Stop an Animation
要启动HTML5画布动画，可以不断地请求新的动画帧；要停止HTML5画布动画，则停止请求新的动画帧。
说明：点击画布启动动画并停止动画。
以上代码演示了通过点击鼠标启动和停止动画，而不是像以上的代码范例停止1秒后启动动画。