6.8 使用画布创建动画
使用JavaScript（或jQuery等JavaScript库）时，你可能习惯操作页面元素的位置、大小、图像或色彩，并看着它神奇地直接忘记其旧属性，而更新其新属性。按这个逻辑，如果我们不断增加一个元素的x和y位置，可以创建将此元素移到页面右下角的动画效果。但如果我们在画布上以这种方式移动方块的话，结果可能让我们很意外（如图6-13所示）：
请记住画布是一个低级别和立即模式系统：每次循环在屏幕上绘制的另一个矩形，都会叠加于上次迭代的矩形之上。这样的结果是一个大涂鸦，而不是一个动画。为创建在页面上移动的方块动画，我们需要稍稍多做点工作：
1．存储方块的初始（x，y）位置；
2．清除画布；
3．更新方块的（x，y）位置；
4．在新的位置绘制方块；
5．等待一小会儿；
6．循环回到第2步。
基本上所有的位图动画系统都在幕后做类似上述循环的操作。在某些情况下第2步是可选的。例如，如果背景完全被实色、渐变或位图图像填补，那就没有必要清除它。第5步是必要的，这使用户有机会看到动画，并让浏览器有时间去做其他事情，否则该浏览器将立即被冻结。通常情况下大约20～50毫秒的延迟比较合适。以下页面会呈现我们想要的效果：
时间： 2024-04-24 14:08:36