你可以用drawImage命令的源参数绘制一个帧。事实上，是只绘制源图像的一部分。所以为了绘制这唯一的第一帧，使用允许你指定源图像中的矩形的drawImage的拓展版。因为我们的猫动画是由6个96 x 96象素大小的帧组成的，我们可以添加：

ctx.drawImage(img, 0, 0, 96, 54, canvas.width/2 – 48, canvas.height/2 – 48, 96, 54);

这里的关键是起点（0, 0, 96, 54）。这限制被绘制图像为猫动画的第一帧。我还设置根据单帧来居中，而不是包含所有6帧的整个图像尺寸。

现在总算有点意思了。为了让图像动起来，我们必须追踪要绘制的帧，然后随着时间推进帧数。为此，我们必须把静止页面做成隔时循环的页面。

我们按照老方法来做。添加60帧每秒间隔计时器。为了保证只有图像加载后才开始循环动画，我们要在loaded功能中添加以下命令：

function loaded() {
imageReady = true;
setTimeout( update, 1000 / 60 );
}

添加更新后的函数，然后调用redraw：

var frame = 0;
function update() {
redraw(); frame++;
if (frame >= 6) frame = 0;
setTimeout( update, 1000 / 60 );
}

当绘制后且帧推进完，计时器就会重置。

下一步，调整绘制图像，使源窗口根据我们想要绘制的那一帧位置来移动（关键是给帧设置的源X位置，是帧乘上帧的大小）。

function redraw() {
ctx.fillStyle = ‘#000000′;
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (imageReady)
ctx.drawImage(img, frame*96, 0, 96, 54,
canvas.width/2 – 48, canvas.height/2 – 48, 96, 54);
}

结果如下：

()

我们邪恶的不死吸血猫活了！跑得太快了。

我们还要对动画做一些改进。

setTimeout很好，几乎在所有浏览器上都运行得不错，但还有一个更好的方法，那就是requestAnimFrame。

requestAnimFrame的作用基本上就是setTimeout，但浏览器知道你正在渲染帧，所以它可以优化绘制循环，以及如何与剩下的页面回流。它甚至会检测标签是否可见，如果隐藏就不绘制，这样就节省了电池（是的，以60fps的速率循环的网页游戏是很烧电池的）。另外，浏览器还有机会以其他我们不知道的方式进行优化。根据我对更高级的帧加载的经验，这样可以大大提高表现，特别是在现在的浏览器中。

我要给读者提个醒，在某些情况下，setTimeout比requestAnimFrame更好用，特别是对于手机。测试一下，根据设备配置一下你的应用。

在不同的浏览器上调用requestAnimFrame的情况也不同，标准的检测方法如下：

window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();

如果requestAnimFrame支持不可用，还是可以用回内置的setTimeout。

然后你必须修改update方法，以便重复获得请求：

function update() {
requestAnimFrame(update);
redraw();
frame++;
if (frame >= 6) frame = 0;
}

在渲染/更新以前调用requestAnimFrame，往往能获得更连贯的效果。

另外，当我第一次使用requestAnimFrame时，我试图查找它如何计时的资料，但什么也没找到。那是因为它本来就是不能计时的。setTimeout没有什么与设置MS延时相当的东西，这意味着你不可能控制帧率。那你就做好你该做的事，其他的就让浏览器去处理吧。

另一件要注意的事是，如果你封闭使用requestAnimFrame，那么你必须做一个本地交换来调用它，如：

my.requestAnimFrame = (function () {
var func = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback, element)
{
window.setTimeout(callback, 1000 / this.fps);
};
// apply to our window global to avoid illegal invocations (it’s a native) return function (callback, element) { func.apply(window, [callback, element]);
};
})();

接下来我们要设置一下猫的奔跑速度。现在，动画帧根据帧率播放，不同的设备情况有所不同。那就不妙了，因为如果角色移动的同时又有动画，结果就会看起很来很怪很不协调。你可以试一下控制帧率，但根据真正的定时做出的动画从各方面看都更好些。

你还会发现，游戏中的定时通常运用于你所做的一切东西：燃烧率、转弯速度、加速、跳跃，使用合适的定时，都会有更好的效果。

为了让猫以规定的速度奔跑，我们必须追踪已经经过的时间，然后根据分配给每帧的时间播放帧。基本步骤是：

1、按每秒几帧设置动画速度(msPerFrame)。

2、当你循环游戏时，计算一下自最后一帧以后已经经过了多少时间（delta）。

3、如果已经经过的时间足够把动画帧播完，那么播放这一帧并设置累积delta为0。

4、如果已经经过的时间不够，那么记住（累积）delta时间（acDelta）。

以下是代码：