网络工作者和画布

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):

• 将imageData发送给worker
• 接收数据

Answer 2

较新的浏览器支持OffscreenCanvas（请参阅该文档中的浏览器兼容性），它是在 Web Worker 中运行的画布 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);
};

（requestAnimationFrameAPI 存在于工作程序内部。）