绘制动画

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

基本原理

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

基本步骤

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

  • 清空 canvas

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

  • 保存 canvas 状态

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

  • 绘制动画图形(animated shapes)

这一步才是重绘动画帧。

  • 恢复 canvas 状态

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