HTML5 <canvas>：drawImage（）のパフォーマンスへの影響

Question

動的に作成されたキャンバス（つまり、document.createElement（ "canvas"））に対してdrawImage（）を使用した場合と、DOMで既に作成されたキャンバス（つまり、HTMLページ上のタグ）。

drawImage（）の「遅い」部分は、私が間違っているかもしれないが実際にはビジュアルをユーザーに表示する必要があるときに発生すると考えられます（あまりにも多くの情報を見つけることはできません）。

オブジェクトのグループをキャンバスにメモリに描画し、それに続いて「メイン」キャンバスに最後の描画を行うのは、後者にまっすぐ描画するよりも実質的に高価でしょうか？少なくとも組織的な目的のために、複数のキャンバスを持つ方がいいと思う。

関連：キャンバスのサイズは、そのサブセクションにしか描画していない場合、パフォーマンスに影響しますか？

Answer 1

ChromeとFirefoxについて静的キャンバスと動的キャンバスの要素に違いはありませんでした。主にdrawImage（）のピクセル数によって、現在のglobalCompositeOperation（コピー、ソースオーバーが最も速い）が遅くなります。しかし、ブラウザはフルページをレンダリングしなければならないので、キャンバスの下に伸ばした（背景の）イメージを置くことは悪い考えです。

キャンバスの属性width/heightとそのスタイルの幅/高さの属性には違いがあります。スタイルサイズを100％に設定した300×200ピクセルのキャンバスを使用できます。それでは、内部描画速度はブラウザーウィンドウのサイズと同じです。もちろん、表示品質が問題です。

blitting（drawImage）から描画（線、ボックス、円弧など）を分離して、アプリケーションで時間を消費するものを見つけることができます。長い間、複数のキャンバス（画像処理、ブレンドビデオなど）は必要ありませんdrawImage（）を避けてください。要素ではなくあなたのコードは、組織的な目的に対処するのに役立ちます。

1024x600ピクセルの1 GHZ Netbookのフルスクリーン描画イメージ（）は約10msecかかります。これを2回行うと、50Hzの表示レートを達成する方法がないことを意味します。 iPhoneやAndroidスマートフォンをターゲットにすると状況が悪化します。

キャンバスで古き良きダブルバッファリングを行う必要はありません。既に実装されています。必要なときにキャンバス要素の関連する（汚い）部分のみを自由に更新し、必要なmsecを得ることができます。

複数のキャンバスを使用する代わりに、異なるセクションの巨大なオブジェクトに対してすべての不可視操作を実行するオプションがあります。drawImage（）はターゲットを指定し、ソースは同じです。デバッグ中に何が起きているのかを確認するのは簡単です。