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