43

Webワーカーはキャンバスオブジェクトにアクセスできますか？

4

3 に答える 3

63

質問は現在半年以上前のものであるため、小さな更新：

Chrome / Chromium 6では、キャンバスのImageDataオブジェクトをWebワーカーに送信し、Webワーカーにオブジェクトに変更を加えてから、putImageData（..）を使用してキャンバスに書き戻すことができるようになりました。

GoogleのChromabrushはこのようにそれを行います、ソースコードはここにあります：

アップデート：

Opera（10.70）とFirefox（4.0b1）の最新の開発スナップショットは、ImageDataオブジェクトのWebワーカーへの受け渡しもサポートしています。

2017年の更新：

Githubからの実際のリンク（必要なファイルを簡単に見つけることができますChromabrush）：

于 2010-07-12T13:47:07.173 に答える
4

いいえ。

postMessage 仕様は数か月前に更新され、ImageData オブジェクトを投稿できるようになりましたが、まだ誰もその動作を実装していません (私たちは皆、そこに到達しています)。キャンバス自体の問題は、それが DOM 要素であるため、worker では機能しない (DOM がない) ことです。

これは最近、whatwg または web-apps メーリング リストで提起されたので、Worker で CanvasRenderingContext2D のような API を提供できるかどうかを検討し始めると思います。

于 2009-12-08T05:18:03.333 に答える
3

新しいブラウザーはOffscreenCanvas (そのドキュメントのブラウザーの互換性を参照) をサポートしています。これは、Web ワーカーで実行されるキャンバス 2D コンテキストですが、自動的にメイン スレッドに描画されます。

以下は、その MDN doc の基本的な例です。

メイン スレッドで OffscreenCanvas を作成し、ワーカーに送信します。

var htmlCanvas = document.getElementById("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();

var worker = new Worker("offscreencanvas.js"); 
worker.postMessage({canvas: offscreen}, [offscreen]);

ワーカー スレッドでは、オフスクリーン キャンバス参照を使用して、メイン スレッドで通常行うようにコンテキストを作成し、必要な描画コマンドを実行します。

onmessage = function(evt) {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");

  function render(time) {
    // ... some drawing using the gl context ...
    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
};

( requestAnimationFrameAPI はワーカー内に存在します。)

于 2020-05-05T19:10:40.173 に答える