画布绘制调用呈现顺序不正确

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 而不是主画布时，也会发生这种情况。

在"源结束"

和"目标结束"之间更改全局复合操作（对于两个上下文）不会改变这一点。

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

提前感谢！

附录：更改复合操作确实按预期运行，但不用于解决此特定问题。 很抱歉模棱两可。

Answer 1

这里有很多

可疑之处。

首先，双缓冲画布只会

通过增加复杂性来损害性能，所有浏览器都会自动进行双缓冲，所以如果这是你的目标，你不应该绘制到缓冲区。

下面是为什么不需要双缓冲的示例：http://jsfiddle.net/simonsarris/XzAjv/

因此，进入问题的实质，离散函数中的JavaScript行不会简单地乱序。这里还有其他问题。

在drawImage上设置断点几乎可以立即解决这个问题，所以如果你不熟悉Firebug或chrome开发人员工具，我强烈建议你看看它们。

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

另一种可能性是this.w和this.h意外地非常小，因此您在方法开始时的初始clearRect和fillRect什么都不做。

无论如何，猜测远不如开放开发人员工具并实际查看正在发生的事情。

Answer 2

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

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