在HTML 5 canvas上渲染SVG圖像的性能

SVG圖像對於高細節圖形來說非常適用，但由於它們包含許多需要在渲染之前計算的座標，因此它們可能對性能不利，比如渲染JPG只是繪製一個預先計算的像素數組？在HTML 5 canvas上渲染SVG圖像的性能

我使用Context.drawImage，並且我不知道SVG圖形是否需要計算每個繪製的畫布框，或者它們是否可能以某種方式緩存？或者我可能不擔心什麼？

2012-08-01 GenericJoe

性能取決於您的具體應用和圖形的複雜程度，但一般而言，矢量圖形不會產生重大影響。您的主要瓶頸通常是操縱畫布中的像素數據;畫布越大，畫出的時間就越多。

但是，除非您每畫面重新繪製畫布，否則所有執行的計算都是最初繪製圖像時所做的計算。當你不修改它時，畫布實際上只不過是一個靜態位圖。

2012-08-02 00:07:07 Krash

嗨Krash，謝謝你的答案。爲了澄清，我在畫布上設置了動畫對象，所以我實際上是在每一幀重新繪製SVG。我想它對於沒有SVG圖像是一樣的，我應該將它們緩存在單獨的無可見畫布中？ – GenericJoe 2012-08-05 14:50:55

如果你不止一次地繪製它，是的，將SVG緩存到屏幕外的畫布會更快（確保只在最初加載它時緩衝它，而不是每幀）。畫布上下文將處理和柵格化圖像爲畫布位圖，允許像素數據直接添加到目標畫布上，而無需任何額外的前導碼。 – Krash 2012-08-06 19:41:47

回答