1

我有以下代码用于将绘制调用写入“后台缓冲区”画布，然后使用 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 循环中，它会按预期工作......

提前致谢！

附录：更改复合操作的行为确实符合预期，但不是为了解决这个特定问题。很抱歉模棱两可。

4

2 回答 2

1

这里有很多可疑之处。

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

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

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

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

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

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

在任何情况下，推测都远不及开放开发者工具并实际观察正在发生的事情。

于 2012-07-01T01:22:06.917 回答
0

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

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

于 2012-07-01T01:23:49.570 回答