智能替代在Web Worker中使用<canvas>方法？

Question

我试图改善这种拉伸速度JS库热图：

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

以期让动画工作。它如何工程─它的删节版平（即不会插入到DOM上<canvas>）中的所有数据点circles-所有相同的半径，但不同的阿尔法：

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()上进行着色。

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

Answer 1

不幸的是，目前不可能将任何DOM或其​​他不可转移的对象（例如画布）传递给网络工作者。

但是，您可以将图像数据传递给工作人员。工作人员可以操纵数据以模拟渐变等形成的阴影，然后将其传回给putImageData（）。我不确定这会是多么有趣。我知道我正在模拟当前的产品。但是，如果您打算委托给工作人员，那是我目前的建议。

编辑：和一个艰难的时间，我的意思是this。

再次编辑：我知道这是真的在后面，但你也可以通过只抓取可能受到影响的区域来节省一些时间，而不是抓取和替换整个画布。

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