私はキャンバス上で単純なゲーム（上からのビュー）を作ろうとしています。複数のキャンバス要素がパフォーマンスにどのように影響しますか？
1）すべてを<canvas>に描画し、再描画が必要な領域を計算してください。
2）別の<canvas>要素にシーンの特定部分を描画し、必要に応じてそれぞれを更新します。それはおそらく、私は部分的な再描画を使用することもできます。
たとえば、1つの要素、2番目の敵、3番目のカーソルなどにマップを描画できます。敵を動かすと、2番目のキャンバスのみを再描画できました。
可能な限り詳細に説明してください。どのオプションが優れているのか、その理由は何ですか？そして、あなたはこの問題について私の知識を深めることができる本に助言してもらえますか？初心者向け。
ほとんどのキャンバスゲームは、あなたが記述しているような種類のレイヤーを使用します。最も遠いフォワードレイヤは、別のキャンバスまたはHTML要素のいずれかによってHUDになります。これは、プレイヤーをアップグレードするなど、何かが発生した場合にのみ変更されます。その後、それは彼らがどのようにキャンバスを描くかによって決まります。最も簡単な方法は、マップの部分を単に描画し、障害物が画面に表示されるようにすることです。
あるキャンバスを別のレイヤーの上にレイヤーすることは、そのフレーム中に任意のレイヤーにピクセルを書き込む場合は、一度フレームを合成する必要があることに気付きます。実際にDOMを持っているのは、javascriptでdrawImageを使って（うまく）行うよりも、合成を処理するのが遅くなるということです。そうすれば、DOMが認識しないような短期間の短縮を行うことができます。 – Blindman67
それはゲームキャンバスのように頻繁に再描画しないようにして、onChangeだけを行うことです。 –
レイヤーのいずれかで1つのピクセルを変更すると、すべてのレイヤーを合成する必要があります。背景と前景のレイヤー付きキャンバス。あなたはそれを描画するために前景をクリアする必要があります。終了すると、DOMは背景と前景のキャンバスを再コンパイルします。しかし、バックグラウンドをオフスクリーンに保ち、 'ctx.clearRect'を使うのではなく' ctx.drawImage（bgCanvas、0,0） 'をクリアすると、画面全体のピクセル書き込みを保存します。階層化されたキャンバスは魔法のように合成されるわけではなく、drawImageコールのようにGPUが必要です。 JSより遅いのは何ですか？ DOM – Blindman67
あなたの質問は、コードが何をしなければならないかによって決まります。複雑さはCPUのために働くだけです。パフォーマンスを簡単に保つ。ほとんどのゲームでは、1つのディスプレイキャンバスを使用し、キャンバス全体を1フレーム（1/60秒）ごとに再描画します。知識を得るための最善の方法は、IDEを開いてコードを書くことです。すぐに質問に答えます。 BTWの再描画領域の追跡は致命的です。 – Blindman67
なぜ再描画領域を追跡するのが致命的な終わりだと思いますか？私はこれが負荷を減らすべきだと思った –
それはすべてのPPS（秒あたりのピクセル数）GPUは高速、javascriptではありません。つまり、キャンバスを作成してコンテキストを取得し、 'const test = s => { var n = performance.now（）;を実行します。 （var i = 0; i <10000; i ++）{ ctx.clearRect（0,0、s、s）; } console.log（（（performance.now（） - n）/（s * s）））;} test（10）; test（300）; '2回目の呼び出しでピクセルが〜10,000倍速くクリアされます。 – Blindman67