キャンバス最適化ピクセルの変化が

Question

を知られているとき、私は現在、イベントのように実装されている単一の画素のみの変更が知られているWebアプリケーション、に取り組んでいます：

function pixelChanged(x, y, color)

キャンバスに描画するこれらの必要性。これらのメソッドの両方を持っているように見える今

1. ドローピクセル直接fillRectと
2. ごとに数マイクロ秒

をピクセルを暗記し、putImageDataでキャンバス上に置く：私はこれを実現するには、2つの方法を試してみましたパフォーマンスが悪い最初のものは多くの再描画をもたらし、2番目のものは小さな領域のみが変更されたとしてもイメージ全体を再描画します。

私の具体的な質問は、これを実装するためのより良い方法がある場合です（1.のようなものですが、何らかの方法で遅れていますか？）。

もしそうでなければ、どの方法を好むべきですか？この場合、どうすれば最適化できますか？キャンバス - 最適化のためのさまざまなアプローチで

事前に感謝し、よろしく、

コピー

Answer 1

私が取ったアプローチは、大きな画像をNxNグリッドに分割し、変更された特定の領域を再描画することです。私は再描画の数と再描画のサイズのバランスが50x50px程度になるように適切なサイズを見つけました。描かれる最大のpx/secの正確な最適数が必要な場合は、ベンチマークのどこかにあります。

したがって、60x60の変更がある場合は、4と9の50x50の四角形を再描画します。

Answer 2

チェックアウトこのarticle。私はあなたにいくつかの最適化を組み合わせて、それがどうなるかを見てみましょう。私たちの目は大きな領域で頻繁に変化するピクセルを認識しないので、ピクセルの変更をバッファしていくつかの変更を一度に描画することは理にかなっています。また、変更を適用するには数ミリ秒かかるため、間隔を短くしないでください。