小编zac*_*297的帖子

我正在使用canvas标签开发一个基于JavaScript的简单游戏。作为游戏的一部分，我有几个大的精灵页面（例如2816x768和4096x4864），每个页面都包含屏幕上角色的相关动画。当游戏开始时，游戏只是播放角色的空闲动画。当用户按下空格键时，我将开始使用完全不同的拼版纸播放另一个动画。

这是绘制精灵的代码：

Sprite.prototype.drawFrame = function(x, y)
{
    ctx.drawImage(this.image,
        x*this.width, y*this.height,
        this.width, this.height,

        this.position[0], this.position[1],
        this.width, this.height);
};

这是加载图像的代码：

Stage.prototype.loadImage = function(src)
{
    var image = new Image();
    this.incAssets();
    var stage = this;
    image.onload = function()
    {
        stage.decAssets();
    }
    image.src = src;
    return image;
}

问题是从用户按下空格到从新的Sprite Sheet实际绘制帧起有1.5秒的延迟。这仅是一次，并且不会影响以下动画的平滑度。我已经使用了精灵表，new Image并且直到所有相应的image.onload事件都触发后，游戏才开始运行，所以我知道浏览器不会在等待它们的加载。我已经使用Chrome 17.0中的调试器逐步调试了JavaScript，并缩小drawImage了上下文调用的延迟。最令人困惑的是，此延迟在Firefox 10.0.2中不存在，因此这是Chrome特定的问题。这对游戏的发展非常不利。

我在这里做错了什么？无论如何，我可以减少Chrome的延迟吗？

编辑：我尝试按照Peter Wishart的建议尽快绘制整个下一帧，但是效果很小。我也尝试修改loadImage如下：

Stage.prototype.loadImage = function(src)
{
    var image = new Image();
    this.incAssets();
    var stage = this;
    image.onload = function()
    {
        ctx.drawImage(image, 0, 0); …