使用drawImage與畫布在Chrome上速度很慢

我一直在嘗試使用drawImage將大量的SVG文件實例繪製到畫布上。通過使用SVG作爲源創建單個圖像元素，然後使用drawImage爲畫布上的每個實例創建一個圖像元素，我希望即使有大量實例，我也可以非常快速地在畫布中生成合成圖像。使用drawImage與畫布在Chrome上速度很慢

性能方面，這在Firefox中運行良好 - 我可以在300毫秒內繪製60,000個實例。但是在Chrome上它非常慢：16,000個實例需要5秒鐘。我已在jsfiddle上放置了一個代碼版本，該代碼演示了Chrome上的問題。

我已經得到了一個如何在下面調用drawImage的示例，其中畫布填充了儘可能多的大小x尺寸的圖像。我讀過一個建議，嘗試使用第二個隱藏畫布來緩衝所有實例，然後用一次調用更新可見畫布。但是這並沒有影響到性能，單個drawImage調用仍然會讓事情陷入困境。

對發生了什麼問題以及我能做些什麼來解決它的想法？

  svgImg = new Image; 

      can.width = 1800; can.height = 900; 
      svgImg.onload = function() { 
       if (internalSize == size) 
        return; 
       internalSize = size; 
       var timeBefore = new Date().getTime(); 
       var tot = 0; 

       var canWidth = can.width; 
       var canHeight = can.height; 
       for (var x = 0; x < canWidth; x += size) { 
        for (var y = 0; y < canHeight; y += size) { 
         ctx.drawImage(svgImg, x, y, size, size); 
         tot++; 
        } 
       } 
       document.getElementById('count').innerHTML = "Total Count: " + tot; 
       var timeAfter = new Date().getTime(); 
      }; 
      svgImg.src = "http://www.w3.org/Icons/SVG/svg-logo.svg"; 
      svgImg.width = size; 
      svgImg.height = size;

來源

2013-04-15 DerekMuk

減速1：當源或目的地帆布是在RAM中，而另一個畫布是在GPU上時發生。

放緩2：時發生的src和dest畫布的大小不同

我已經注意到了同樣的問題，並簡化了的情況下繪製一個空白的畫布另一個。當畫布的尺寸相同時，這似乎不成問題，但在某個時刻，表演需要一次潛水。這裏是jspref，和我的結果：

jspref chrome results

請注意，在255x255爲100x100和260x260爲100x100的差異。

來源

2013-05-23 15:44:29 forresto

這是瘋了。感謝您進行這項測試。 – RadiantHex

這對我來說也是如此。我看到了大量的滯後，直到我使畫布尺寸完全相同。 –

雖然錯誤跟蹤器表示錯誤已修復，但Sam指出當畫布尺寸不同時仍然會出現放緩情況。我已經更新了答案以反映這一點。 – Charlie

使用drawImage與畫布在Chrome上速度很慢

回答

相關問題