1

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

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

为了让动画发挥作用。其工作原理的简化版本——它将所有数据点（在<canvas>从未插入 DOM 的数据点上）绘制为圆——所有的半径都相同，但 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()在该画布上运行，根据 alpha 为每个像素着色，然后在页面putImageData()上显示的最终<canvas>结果上对其进行处理。

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

4

1 回答 1

2

不幸的是，目前不可能将任何 DOM 或其他不可转移的对象（例如画布）传递给 Web Worker。

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

编辑：在一段艰难的时期，我的意思是这个。

再次编辑：我知道这确实落后了，但您也可以通过仅抓住可能受到影响的区域来节省一些时间，而不是抓住并更换整个画布。

再次编辑：没试过，但如果你可以在工作人员中制作画布，你可以向它发送指令，让它绘制，然后发回图像

编辑 2022-02-15：你现在可以这样做

于 2013-01-08T00:16:02.403 回答