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 を (両方のコンテキストで) 変更しても、これは変わりません。

逆説的に言えば、入れ子になった for ループ内に青色の fillRect を配置し、他の描画呼び出しを使用すると、期待どおりに動作します...

前もって感謝します！

補遺: 複合操作の変更は期待どおりに動作しますが、この特定の問題を解決するものではありません。あいまいで申し訳ありません。

4

2 に答える 2

1

ここには疑わしいことがたくさんあります。

まず、キャンバスのダブルバッファリングは、複雑さを追加することでパフォーマンスを低下させるだけです。すべてのブラウザは自動的にダブルバッファリングを実行するため、ここでの目標がバッファに描画されるべきではありません。

ダブルバッファリングが不要な理由の例を次に示します。http：//jsfiddle.net/simonsarris/XzAjv/

したがって、問題の要点を理解すると、離散関数内のjavascriptの行は、単に順序が狂うだけではありません。ここで他の何かが間違っています。

にブレークポイントを設定すると、drawImageこれはほぼ瞬時に解決されるため、FirebugまたはChrome開発ツールに慣れていない場合は、それらを確認することを強くお勧めします。

あなたが見ている「青」は実際にはあなたの「バッファ」キャンバスに描かれている唯一のものであり、おそらくthis.buffer実際にはバッファコンテキストではないと思います。

もう1つの可能性は、this.wとthis.hが誤って非常に小さいため、メソッドの最初clearRectと最初fillRectは何もしていないことです。

いずれにせよ、憶測は開発者ツールを開いて実際に何が起こっているのかを見るほど良いものではありません。

于 2012-07-01T01:22:06.917 に答える
0

一般的に言えば、物事を整理する必要がある場合は、オブジェクトではなく配列を使用します。オブジェクトの反復は、特定の順序であることが保証されていません。

配列を使用し、for（var i = 0; i

于 2012-07-01T01:23:49.570 に答える