1

今、私はすべてが描かれている1つの大きなキャンバスを持っています。キャンバスはJSファイルに直接作成されます。

 var canvas = document.createElement ("canvas");
 var ctx = canvas.getContext("2d");
 canvas.width = document.width;
 canvas.height = document.height;
 document.body.appendChild(canvas);

ブラウザウィンドウに合わせてサイズを変更します。

他のすべての要素と一緒に1つのキャンバスにグラデーションの背景を描画しています。背景の色は、ゲームモードが変更されるたびにランダムに生成されます（たとえば、メインメニューがゲームに切り替えられたとき、次にレベル終了画面に切り替えられたときなど）。現在、私はこれらを次のようにキャンバスに描画しています。

var grad1 = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, 500);
grad1.addColorStop(0, bgGradStop1);
grad1.addColorStop(1, bgGradStop2);

ctx.fillStyle = grad1;
ctx.fillRect(0, 0, canvas.width, canvas.height);

背景に別のキャンバスを使用すると、パフォーマンスが向上することを何度も読みました。これを効果的にするために私がしなければならない特定のことはありますか、または単に別のキャンバスを作成し、同じ正確なコードを使用して背景を描画し、次のように他のキャンバスを使用するように変更するだけですか？

var grad1 = ctxBg.createRadialGradient(canvasBg.width / 2, canvasBg.height / 2, 0, canvasBg.width / 2, canvasBg.height / 2, 500);
grad1.addColorStop(0, bgGradStop1);
grad1.addColorStop(1, bgGradStop2);

ctxBg.fillStyle = grad1;
ctxBg.fillRect(0, 0, canvasBg.width, canvasBg.height);

または、パフォーマンス上の利点を得るには、2番目のキャンバスを使用するまったく異なる方法が必要ですか？

また、まったく同じことを別のキャンバスで行うだけの場合、たとえば、他のエンティティが移動しているときにHUDテキストを独自のキャンバスに移動することにもメリットはありますか？さまざまなタイプのエンティティを独自のキャンバスに分離することさえできますか？複数のキャンバスの利点は実際にどこまで広がりますか？

4

1 に答える 1

2

または、パフォーマンス上の利点を得るには、2番目のキャンバスを使用するまったく異なる方法が必要ですか？

あなたはそれを行う方法について正しい考えを持っていますが、あなたの場合、2番目のキャンバスは必要ないと思います。

パフォーマンスの観点から重要なことは、グラデーションを作成して塗りつぶし続ける必要がないことです。ドローループで行っているのが次の場合：

ctx.fillStyle = grad1;
ctx.fillRect(0, 0, canvas.width, canvas.height);

次に、ここでかなり腫れているはずです。その後、背景に2つ目のキャンバスを配置しても、あまり役に立たないと思います。パフォーマンスがわずかに向上する可能性がありますが、必要がない場合は、追加のDOM要素を追跡する必要があるのは誰ですか？

メインのキャンバスの後ろに2つ目のキャンバスを配置するパフォーマンスをテストするのは少し難しいですが、DOMに2つの大きなキャンバスを配置する代わりに、メモリ内のキャンバスにグラデーションを描画し、グラデーションctx.drawImage(inMemCan, 0, 0);を設定する代わりに常に呼び出す方法があります。それを描く。画像の描画は高速であることが知られており、この方法で2つのキャンバスを使用すると、2つのページ上のキャンバスから期待できる速度におそらく近いでしょう（そしてうまくいけば、より高速になるでしょう）。

したがって、メモリ内のキャンバスからメインキャンバスへのグラデーションの描画と、従来のグラデーションの描画をテストできます。大きなキャンバスを使用した簡単なテストは次のとおりです。

http://jsperf.com/gradient-vs-immemcan

彼らはそれが思われるかなり等しいです。これがあなたのバックグラウンドで唯一のものであるなら、私はそれについて心配しません。あなたが最初に揚げるにはおそらくもっと大きなパフォーマンスの魚がいるでしょう。

比較的複雑な背景がめったに更新されないが、前景とは独立している場合に備えて、複数のキャンバスの利点を節約します。代わりに、背景が30のグラデーションといくつかのパスで作成されている場合は、2番目のキャンバス（またはメモリ内のキャンバスを使用して画像をキャッシュする）を使用すると、かなりの効果が得られます。

ブラウザウィンドウに合わせてサイズを変更します。

将来的に調べたい場合は、フルスクリーンAPIがwebkitとfirefoxで非常にうまく機能することを思い出してください。

于 2012-08-16T20:55:08.457 に答える