您还将学习利用"> HTML5 实现动画的最佳方式，如何滚动背景，以及如何实现视差，从而模拟三维效果。
图形和动画是任何视频游戏最根本的方面，所以在本文中，我将从 Canvas2D API 的简要介绍开始，对 Snail Bait 的中央动画的实现进行讨论。在本文中，您将学习如何：
将图像和图形基元绘制到画布上 创建流畅的、无闪烁的动画 实现游戏循环 以帧数每秒为单位监视动画的速度 滚动游戏的背景 使用视差来模拟三维效果 实现基于时间的运动
本文中所讨论的代码的最终结果如图 1 所示：
图 1. 滚动背景并监视帧速率
背景和平台水平滚动。这些平台在前景中，所以它们的移动明显快于背景，这样会形成一个温和的视差效果。在游戏开始时，背景由右至左滚动。在结束某个级别时，背景和平台开始逆转方向。
在开发的这个阶段，跑步者不动。此外，游戏还没有经过碰撞检测，所以当跑步者的下面没有平台时，她会漂浮在半空中。
最后，游戏画布的上方和左侧的图标会显示剩余生命的数量（如 本系列第一篇文章中的图 1 所示）。目前，该游戏会在这个位置上显示当前动画速度（以帧数每秒为单位）。
在继续后面的操作之前，您可能想尝试创建一个这类游戏，因为它就在 图 1 里；如果您创建了这样的游戏，就会更容易理解相关的代码。
即时模式图形
Canvas 是一个即时模式 图形系统，这意味着它会即时绘制您指定的内容，然后即时忘记。可伸缩矢量图形 (Scalable Vector Graphics, SVG) 等其他图形系统实现了保留模式 图形，这意味着它们会保存一个将要绘制的对象的列表。由于不会因保存显示列表而产生开销，所以 Canvas 的速度比 SVG 更快一些；但是，如果您想保存一个用户可以操作的对象列表，则必须自己在 Canvas 中实现该功能。