绘制动画
之前我们介绍都是静态图像的绘制,接下来介绍动画的绘制方法。
基本原理
canvas 动画的基本原理并不复杂,就是利用 setInterval
和 setTimeout
来逐帧的在画布上绘制图形。
基本步骤
在每一帧绘制的过程中,基本遵循以下步骤。
- 清空 canvas
除非接下来要画的内容会完全充满画布(例如背景图),否则你需要清空所有内容。最简单的做法就是用
clearRect
。
- 保存 canvas 状态
如果你要改变一些会改变 canvas 状态的设置(样式,变形之类的),又要在每画一帧之时都是原始状态的话,你需要先保存一下。
- 绘制动画图形(animated shapes)
这一步才是重绘动画帧。
- 恢复 canvas 状态
如果已经保存了 canvas 的状态,可以先恢复它,然后重绘下一帧。