HTML Canvas 性能 - 導入圖像或繪制 canvas

Question

對於這種復雜/簡單的圖像，是創建 png 並導入 canvas 還是繪制路徑並填充 canvas 更好？

http://www.freeiconsdownload.com/site-images/Large/developer_icons_452x336.jpg

Answer 1

對於 Canvas，一般來說，從 PNG/內存中的 canvas 中繪制幾乎總是比構造和繪制路徑更好。 （見腳注）這里有一些簡單的數據。 我們這里說的是 10 倍。 對於簡單的東西。

特別是如果你要一遍又一遍地繪制這些對象，每秒 60 次。

尤其是涉及文本時。

對於復雜的畫布生成的形狀，一些注重性能的人已經開始在內存畫布上預渲染它們，然后從 canvas 繪制到 canvas（使用 drawImage），而不是每次都重新創建路徑。 在很多情況下這是值得的，但當然沒有什么能比分析和計時你自己的具體情況更好。

不要偏離路線，但我只想提醒您，在您（幾乎）完成 Canvas 應用程序之前，您可能不應該擔心這類事情。

“我們應該忘記小的效率，比如大約 97% 的時間：過早的優化是萬惡之源”——Knuth

需要注意的一件大事是，對於許多應用程序來說，繪制這些按鈕的性能甚至可能無關緊要（或者沒有明顯的區別），您可能甚至不想擔心哪種方式更快，直到您已經完成您的 Canvas 應用程序的第一次迭代，並且正在進行“拋光、拋光、拋光”更新。

---

有些人可能想知道什么時候動態渲染路徑更好，這對大多數人來說可能是顯而易見的，但如果不是，我會提一下。 有時候，路徑渲染是這樣的：交互式路徑，例如在路徑中產生的繪圖程序和動畫，其中下一幀不是另一個靜止圖像，而是路徑的補充。 這些以及更多——你想用每一幀更新路徑本身的任何地方——是你想要保留路徑而不是嘗試預渲染任何東西的地方。

Answer 2

我想每個瀏覽器的性能都會不同，最好寫一個快速的基准測試並計算繪制每種類型的 1000 個所需的時間。

話雖如此，就易於編程而言，如果您已經擁有 PNG，為什么不按原樣使用它們。