虽然canvas的API并未直接提供支持动画的方法，但就其本身而言，在canvas中实现动画效果也很简单：只需要持续的更新并重绘画布就行了。这种持续的更新并重绘就叫做动画循环，它是所有动画的核心逻辑。

 

　　在canvas中实现动画，首先需要初始化画布上的对象。然后，启动一个动画循环来更新画布、清除画布、重绘画布，再请求下一个新的动画帧。

 

　　接下来通过一个简单实例，来看看canvas动画的实现过程。该实例以动画的方式，实现一个旋转的八卦图。代码如下：

 

　　上述代码，当页面加载完成后，首先进行初始化，然后调用setInterval（drawStage, 100）方法启动动画循环，在动画循环中，每隔100ms会调用一次drawStage （）函数，来执行更新画布、清除画布、重绘画布的操作，以实现动画效果。运行结果如图 4?37 所示：

 

　　当然，这里只是为了演示实现动画的原理而已，所以实例相对简单。其实，Canvas中的动画可以很简单，也可以很复杂。不管简单还是复杂，其基本原理是完全相同的。