キャンバスに建物の大まかな輪郭を描こうとしています。各側面と上部の「屋根」に一連の正方形を作成し、基本的にペインターのアルゴリズムに従ってそれらを順番に描画することにより、以下の効果を実現しています。
左のスクリーンショットは、それがどのように見えるかを示しています。これは、各正方形を個別にペイントしています。
パフォーマンスを向上させるために、.stroke() と .fill() の呼び出しをできるだけ少なくしたいので、すべての moveTo() と lineTo() 呼び出しをキューに入れ、それらすべてを一度にペイントします。テストの結果、(少なくとも回線については) これにより大幅なパフォーマンスの向上が見られ、私自身も検証しました。
残念ながら、右のスクリーンショットからわかるように、建物を最後に一度だけペイントすると、レイヤリングが基本的に破壊されます。一見ランダムな順序で物事をペイントします。
キャンバスはこのように機能するはずですか？最初のスクリーンショットのように、描画するように指示した順序ですべてを描画しないのはなぜですか? この動作の回避策を知っている人はいますか?
