绘制动画

之前我们介绍都是静态图像的绘制，接下来介绍动画的绘制方法。

基本原理

canvas 动画的基本原理并不复杂，就是利用 setInterval 和 setTimeout 来逐帧的在画布上绘制图形。

基本步骤

在每一帧绘制的过程中，基本遵循以下步骤。

• 清空 canvas

除非接下来要画的内容会完全充满画布（例如背景图），否则你需要清空所有内容。最简单的做法就是用 clearRect。

• 保存 canvas 状态

如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。

• 绘制动画图形（animated shapes）

这一步才是重绘动画帧。

• 恢复 canvas 状态

如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。