javascript - 使用 Web Workers 使用 native Canvas 函数进行绘图

Question

可以将通过 getImageData 获取的 CanvasPixelArray 发送到工作脚本，并让工作脚本在其后台线程中操作像素，并最终发布操作后的像素数组返回。

但是，我正在使用 native Canvas 绘图函数，例如 drawImage。 drawImage 调用当前正在阻塞 UI 线程。这会导致按钮重绘缓慢，并且单击按钮时会出现明显的延迟，仅举几个缺点。 (编辑:现在可以使用 ctx.imageSmoothingEnabled = false 来完成一个小改进，至少在带有 webkit 前缀的 WebKit 上是这样。)

我想使用 Web Workers 将绘图从主线程移动到后台线程。但是，我似乎无法将 Canvas 或上下文发送给工作人员。

我确实找到了this notice on MDN :

Note: As usual, background threads—including workers—cannot manipulate the DOM. If actions taken by the background thread need to result in changes to the DOM, they should post messages back to their creators to do that work.

但我想保持 DOM 不变；我只是想在 Canvas 元素上绘制东西。这可能吗，还是 Web Workers 真的只允许计算而不允许绘图？

(或者是否可以使用诸如 drawImage 之类的函数来操作 CanvasPixelArray 而不是在 Canvas 上绘图？)

Answer 1

[大约 5 年后编辑:其中一些开始发生变化，并且有新的 Web 平台功能实际上允许从 Worker 渲染到 Canvas !有关更多信息，请参阅此博客:https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/ - 其余答案是针对 2011 时代的信息提供的;)]

Web Workers 只能计算，不能修改 DOM 或调用任何绘制 Canvas 的方法。然而，就像你说的，你可以将像素数组发布给网络工作人员以在那里处理它并将其发回。由于这是异步的，我不明白为什么这会导致 UI 线程变慢，除非您故意阻塞直到 Web Worker 响应(您不应该这么做)。

因此，您的 drawImage 调用花费了如此长的时间以至于影响了 UI，这似乎很奇怪。如今，大多数 Canvas 都是硬件加速的，因此它们应该可以很好地跳跃。我的猜测是，您正在通过 Web Worker 绘制 Canvas 像素数组每帧，这实际上意味着您正在使用软件在 JavaScript 中渲染 Canvas 。 Javascript 仍然太慢，无法做到这一点 - 即使 C++ 软件渲染器也有点慢，这就是硬件加速很重要的原因。因此，您可以将某些内容渲染到网络 worker 中的 Canvas 像素数组一次，然后当您获得结果时将其缓存到图像一次>，然后根据需要将该 Image 绘制到 Canvas 上。那应该还是很快的。

编辑:您可能需要查看 WebGL，您可以在其中编写片段着色器，这些片段着色器是处理像素效果的有效小程序。它们完全在显卡上运行，因此速度快得离谱。