画布绘制调用不按顺序呈现

Question

我有以下代码用于将绘制调用写入“后缓冲区”画布，然后使用drawImage将它们放在主画布中。这是出于优化目的，并确保所有图像按顺序放置。

在将缓冲画布放在主画布之上之前，我使用fillRect在主画布上创建深蓝色背景。

但是，蓝色背景在精灵之后呈现。这是意料之外的，因为我正在使其fillRect调用首先。

这是我的代码：

render: function() {
  this.buffer.clearRect(0,0,this.w,this.h);
  this.context.fillStyle = "#000044";
  this.context.fillRect(0,0,this.w,this.h);

  for (var i in this.renderQueue) {
    for (var ii = 0; ii < this.renderQueue[i].length; ii++) {
      sprite = this.renderQueue[i][ii];

      // Draw it!
      this.buffer.fillStyle = "green";
      this.buffer.fillRect(sprite.x, sprite.y, sprite.w, sprite.h);
    }
  }

  this.context.drawImage(this.bufferCanvas,0,0);
}

当我在缓冲区画布上使用fillRect而不是主画布时，也会发生这种情况。

更改'source-over'和'destination-over'之间的globalCompositeOperation（对于两个上下文）都无法改变这一点。

自相矛盾的是，如果我将蓝色fillRect 放置在嵌套的for循环中，并使用其他绘制调用，它会按预期工作...

提前致谢！

Addenum：更改复合操作 的行为符合预期，但不能解决此特定问题。抱歉模棱两可。

Answer 1

这里有很多人怀疑。

首先关闭双缓冲画布只会通过添加复杂功能来破坏性能，所有浏览器都会自动进行双缓冲，所以如果这是你的目标，那么你就不应该使用缓冲区了。

以下是您不需要双缓冲的原因示例：http://jsfiddle.net/simonsarris/XzAjv/

因此，了解问题的关键，离散函数中的javascript行不会简单地运行。这里还有别的错误。

在drawImage上设置断点可以立即解决这个问题，所以如果您不熟悉firebug或chrome开发人员工具，我强烈建议他们一起来看看。

我猜你所看到的“蓝色”实际上是唯一吸引你的“缓冲”画布的东西，也许this.buffer实际上并不是缓冲区上下文。

另一种可能性是this.w和this.h意外地非常小，因此方法开头的初始clearRect和fillRect无效。

无论如何，推测远不如开放开发人员工具和实际查看正在发生的事情那么好。

Answer 2

一般来说，如果您需要按顺序使用数组而不是对象。对对象的迭代不保证按任何特定顺序。

使用数组和（var i = 0; i