基本动画的步骤 Basic animation steps
用canvas画一帧动画,通常需要以下四个步骤:
1. 清空 canvas
除非接下来要画的内容会完全充满 canvas (例如背景图),否则你需要清空所有。最简单的做法就是用 clearRect 方法。
2. 保存 canvas 状态
如果你要改变一些会改变 canvas 状态的设置(样式,变形之类的),又要在每画一帧之时都是原始状态的话,你需要先保存一下。
3. 绘制动画图形(animated shapes)
这一步才是重绘动画帧。
4. 恢复 canvas 状态
如果已经保存了 canvas 的状态,可以先恢复它,然后重绘下一帧。
在操作动画过程中,我们需要一些可以定时执行重绘的方法。有两种方法可以实现这样的动画操控:
第一种方法:可以通过 setInterval 和 setTimeout 方法来控制在设定的时间点上执行重绘。
第二种方法:我们可以利用用户输入来实现操控。如果需要做一个游戏,我们可以通过监听用户交互过程中触发的事件(如 keyboard,mouse)来控制动画效果。
下面是用第一种方法实现的一个时钟动画:
<script type&