Question

是否允许Web工作者访问画布对象？

Answer 1

小更新，因为问题已经超过半年了：

在Chrome / Chromium 6中，您现在可以将画布'ImageData对象发送给Web worker，让Web worker更改对象，然后使用 putImageData（..）将其写回画布

Google的Chromabrush就是这样做的，源代码可以在这里找到：

<强>更新

Opera（10.70）和Firefox（4.0b1）的最新开发快照也支持将ImageData对象传递给Web worker。

2017年更新：

来自Github的实际链接（更容易找到Chromabrush所需的文件）：

Answer 2

没有

postMessage规范在几个月前更新了，允许你发布ImageData对象但是还没有人实现这种行为（我们都到了那里）。 canvas本身的问题在于它是一个DOM元素，所以不能在worker中工作（没有DOM）。

最近在whatwg或web-apps邮件列表中引发了这一点，所以我怀疑我们会开始考虑是否可以在工作者中提供类似CanvasRenderingContext2D的API。

Answer 3

较新的浏览器支持OffscreenCanvas（请参阅该文档中的浏览器兼容性），它是可在web worker中运行但自动绘制到主线程的canvas 2d上下文。

以下是该MDN文档的基本示例。

在主线程中，创建一个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);
};

（工作人员内部存在requestAnimationFrame API。）

网络工作者和画布

3 个答案: