智能替代在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。

再次編輯：我知道這是真的在後面，但你也可以通過只抓取可能受到影響的區域來節省一些時間，而不是抓取和替換整個畫布。

再次編輯：還沒有嘗試過，但是如果您可以在工作人員中製作畫布，您可以發送指令，讓它畫出來，然後發回圖像