HTML5 <canvas>：drawImage（）的性能影響

Question

我想知道在動態創建的畫布上使用drawImage（）（例如document.createElement（「canvas」））與在DOM中創建的畫布之間是否存在性能差異（即HTML頁面上的標籤）。

我的想法是，當drawImage（）實際上需要向用戶顯示視覺效果時，會出現「slow」部分，儘管我可能是錯的（無法找到太多的信息）。

將一組對象繪製到內存中的畫布上，然後最後繪製到「主」畫布上，而不是直接繪製到後者上，會花費更多嗎？我覺得最好有多個畫布，至少是爲了組織目的。

相關：如果您只是繪製它的一個子部分，畫布的大小是否會影響性能？

Answer 1

談論Chrome和Firefox我無法在靜態和動態畫布元素之間找到任何區別。主要是像素drawImage（）句柄的數量使其緩慢+當前globalCompositeOperation（複製，源代碼最快）。但是，瀏覽器必須渲染完整頁面，因此在畫布下放置拉伸（背景）圖像是個不錯的主意。

畫布屬性寬度/高度與其樣式寬度/高度屬性之間存在差異。您可能有一個300 * 200像素的畫布，樣式大小設置爲100％。然後，內部繪圖速度與瀏覽器窗口大小相同。當然，顯示質量是一個問題。

您可能想要從blitting（drawImage）中分離圖形（線條，框，弧等），並找出在應用程序中消耗更多時間的內容。只要不需要多個畫布（圖像處理，混合視頻等），就儘量避免使用drawImage（）。你的代碼 - 而不是元素 - 應該可以幫助你處理「組織目的」。

在1024x600像素的1 GHZ上網本上的全屏drawImage（）大約需要10毫秒。這樣做兩次意味着無法達到50Hz的顯示速率。如果您定位iPhone或Android智能手機，情況會變得更糟。

沒有必要使用canvas進行良好的雙緩衝，它已經實現。您可以隨時更新畫布元素的相關（髒）子部分，並隨時獲得必要的msecs。

除了使用多個畫布外，還有一個選項可以在不同部分的巨大區域上執行所有不可見操作 - drawImage（）與目標和源代碼相同。那麼查看調試過程中發生的情況會更容易。