当前位置：文江博客话题详情

Web Workers 和 Canvas

发布于 2024-08-13 08:47:21 字数 30 浏览 11 评论 0原文

是否允许 Web Worker 访问画布对象？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯到世界奔溃 2024-08-20 08:47:21

小更新，因为问题现在已经有半年多了：

在 Chrome/Chromium 6 中，您现在可以将画布的 ImageData 对象发送给 Web Worker，让 Web Worker 对该对象进行更改，然后将其写回到使用 putImageData(..) 的画布。

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

更新：

的最新开发快照Opera (10.70) 和 Firefox (4.0b1) 还支持将 ImageData 对象传递给 Web Worker。

更新2017：

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

回复收藏 0 原文

星星的軌跡 2024-08-20 08:47:21

较新的浏览器支持 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);
};

：( requestAnimationFrame API 存在于工作线程内部。）

Newer browsers support OffscreenCanvas (see the browser compatibility in that doc), which is a canvas 2d context that runs in web workers, but automatically paints to the main thread.

The following is the basic example from that MDN doc.

In the main thread, create an OffscreenCanvas, then send it to a worker:

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

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

In the worker thread, use the offscreen canvas reference to create a context like you would normally do on the main thread, and perform any drawing commands that you want:

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);
};

(The requestAnimationFrame API exists inside the worker.)

回复收藏 0 原文