Question

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

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

为了让动画变得有效。它是如何工作的简略版本 - 它将所有数据点（在永远不会插入到DOM中的<canvas>）绘制为圆圈 - 所有相同的半径，但具有不同的alphas：

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。但是Web工作者没有DOM访问权限，也无法创建<canvas>标记。有没有人对此有什么好的想法？有没有办法可以在没有画布标签的情况下计算这些像素alpha？

Answer 1

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

但是，您可以将图像数据传递给工作人员。工作人员可以操纵数据以模拟使用渐变等制作的阴影，然后将其传递给putImageData（）。我不确定会有多好玩。我知道我很难模仿当前的产品。但是，如果您打算委派给员工，那么这是我目前的建议。

编辑：在艰难的时刻，我的意思是this。

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

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

在Web Worker中使用<canvas>方法的明智替代方法吗？</canvas>

1 个答案: