本节书摘来自异步社区《JavaScript高效图形编程（修订版）》一书中的第6章，第6.8节，作者：【美】Raffaele Cecco著，更多章节内容可以访问云栖社区“异步社区”公众号查看

6.8 使用画布创建动画

使用JavaScript（或jQuery等JavaScript库）时，你可能习惯操作页面元素的位置、大小、图像或色彩，并看着它神奇地直接忘记其旧属性，而更新其新属性。按这个逻辑，如果我们不断增加一个元素的x和y位置，可以创建将此元素移到页面右下角的动画效果。但如果我们在画布上以这种方式移动方块的话，结果可能让我们很意外（如图6-13所示）：

请记住画布是一个低级别和立即模式系统：每次循环在屏幕上绘制的另一个矩形，都会叠加于上次迭代的矩形之上。这样的结果是一个大涂鸦，而不是一个动画。为创建在页面上移动的方块动画，我们需要稍稍多做点工作：

1．存储方块的初始（x，y）位置；

2．清除画布；

3．更新方块的（x，y）位置；

4．在新的位置绘制方块；

5．等待一小会儿；

6．循环回到第2步。

基本上所有的位图动画系统都在幕后做类似上述循环的操作。在某些情况下第2步是可选的。例如，如果背景完全被实色、渐变或位图图像填补，那就没有必要清除它。第5步是必要的，这使用户有机会看到动画，并让浏览器有时间去做其他事情，否则该浏览器将立即被冻结。通常情况下大约20～50毫秒的延迟比较合适。以下页面会呈现我们想要的效果：