1

この JS ヒートマップ ライブラリの描画速度を改善しようとしています:

http://www.patrick-wied.at/static/heatmapjs/

アニメーションを機能させることを目的としています。それがどのように機能するかの要約バージョン-すべてのデータポイント( <canvas>DOMに挿入されない上)を円として描画します-すべて同じ半径ですが、さまざまなアルファを使用します:

ctx.shadowColor = ('rgba(255,0,0,'+((count)?(count/me.store.max):'0.1')+')');
ctx.beginPath();
ctx.arc(x - 1000, y - 1000, radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

それらがすべて描画されるとgetImageData()、そのキャンバス上で実行され、アルファに従って各ピクセルに色が付けられ、ページに存在putImageData()する最終版に適用<canvas>されます。

当然のことながら、その操作の中で最も集中的な部分は描画部分です。ブラウザーの FPS に影響を与えずに将来のフレームを事前にレンダリングできるように、その責任を Web ワーカーに委任できるようにしたいと考えています。<canvas>ただし、Web ワーカーには DOM アクセス権がなく、タグを作成できません。誰もこれを回避する方法について何か素晴らしいアイデアを持っていますか? キャンバス タグなしでこれらのピクセル アルファを計算する方法はありますか?

4

1 に答える 1

2

残念ながら、現時点では、DOM やキャンバスなどの転送不可能なオブジェクトを Web ワーカーに渡すことはできません。

ただし、画像データをワーカーに渡すことはできます。ワーカーはデータを操作して、グラデーションなどで影の作成をエミュレートし、それを putImageData()-ing に渡すことができます。それがどれほど楽しいかはわかりませんが。現在の製品をエミュレートするのに苦労していることはわかっています。ただし、ワーカーに委任する場合は、これが私の現在の推奨事項です。

編集：そして、大まかな時間までに、私はこれを意味します.

もう一度編集:これが本当に遅れていることは知っていますが、キャンバス全体をつかんで置き換えるのではなく、影響を受ける可能性のある領域のみをつかむことで、時間を節約することもできます.

もう一度編集: 試したことはありませんが、ワーカー内でキャンバスを作成できる場合は、キャンバスに指示を送信し、描画させてから、画像を送り返すことができます。

編集 2022-02-15:今すぐ実行できます

于 2013-01-08T00:16:02.403 に答える