javascript - 在 Web Worker 中使用 方法的明智替代方案？

Question

我正在尝试提高这个 JS 热图库的绘制速度:

http://www.patrick-wied.at/static/heatmapjs/

为了让动画工作。它的工作原理的简化版本 - 它将所有数据点(在从未插入 DOM 的 <canvas> 上)绘制为圆形 - 半径相同，但 alpha 不同:

ctx.shadowColor = ('rgba(255,0,0,'+((count)?(count/me.store.max):'0.1')+')');
ctx.beginPath();
ctx.arc(x - 1000, y - 1000, radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

一旦它们都被绘制出来，它就会运行 getImageData()在该 Canvas 上，根据 alpha 为每个像素着色，然后 putImageData() -在最后<canvas>出现在页面上。

毫不奇怪，该操作中最密集的部分是绘图部分。我希望能够将该责任委托(delegate)给网络 worker ，这样我就可以提前渲染 future 的帧，而不会影响浏览器中的 FPS。但是 web worker 没有 DOM 访问权限，也无法创建 <canvas>标签。有没有人对解决这个问题有什么好主意？有没有什么方法可以在没有 Canvas 标签的情况下计算这些像素 alpha？

Answer 1

遗憾的是，目前无法将任何 DOM 或其他不可转移的对象(例如 Canvas )传递给网络 worker 。

但是，您可以将图像数据传递给工作人员。工作人员可以操纵数据以模拟使用渐变等制作的阴影，然后将其传回以进行 putImageData() 处理。我不确定那会有多有趣。我知道我在模拟当前产品时遇到了困难。但是，如果您打算委托(delegate)给 worker ，这是我目前的建议。

编辑:我指的是一段艰难的时期this .

再次编辑:我知道这真的落后了，但您也可以通过只抓取可能受影响的区域而不是抓取并替换整个 Canvas 来节省一些时间。

再次编辑:没试过，但是如果你可以在worker中做一个 Canvas ，你可以给它发送指令，让它画画，然后传回图像

编辑 2022-02-15:You can do this now