html画布时钟添加背景图,用HTML5 Canvas 实现的 时钟

基本动画的步骤 Basic animation steps

用canvas画一帧动画，通常需要以下四个步骤：

1.  清空 canvas

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

2. 保存 canvas 状态

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

3. 绘制动画图形(animated shapes)

这一步才是重绘动画帧。

4. 恢复 canvas 状态

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

在操作动画过程中，我们需要一些可以定时执行重绘的方法。有两种方法可以实现这样的动画操控：

第一种方法：可以通过 setInterval 和 setTimeout 方法来控制在设定的时间点上执行重绘。

第二种方法：我们可以利用用户输入来实现操控。如果需要做一个游戏，我们可以通过监听用户交互过程中触发的事件(如 keyboard，mouse)来控制动画效果。

下面是用第一种方法实现的一个时钟动画：

It's a clock here

效果图如下：