画布绘制调用不按顺序渲染答案

【问题标题】：Canvas draw calls are rendering out of sequence画布绘制调用不按顺序渲染
【发布时间】：2012-06-30 21:11:08
【问题描述】：

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

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

然而，蓝色背景是在精灵之后渲染的。这是出乎意料的，因为我正在调用它的 fillRect first。

这是我的代码：

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 inside 与其他绘图调用一起嵌套的 for 循环，它会按预期工作...

提前致谢！

附录：更改复合操作确实按预期运行，但不是为了解决这个特定问题。很抱歉有歧义。

【问题讨论】：

标签： javascript html graphics canvas

【解决方案1】：

这里有很多可疑之处。

首先，对画布进行双缓冲只会增加复杂性而损害性能，所有浏览器都会自动进行双缓冲，因此如果这是您的目标，则不应将其绘制到缓冲区。

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

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

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

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

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

在任何情况下，推测都远不如打开开发人员工具并实际查看正在发生的事情。

【讨论】：

谢谢 - 分析帮助我弄清楚它是什么，结果发现有一个双重函数调用。现已修复，按预期工作。至于双缓冲，我决定试一试，基于此：link 非常有趣的信息。只是表明我需要做很多测试才能称它为好。 :)

【解决方案2】：

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

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

【讨论】：