1. Canvas和SVG都允許您在瀏覽器中創建圖形, 但是它們在根本上是不同的。

2. SVG

2.1. SVG是一種使用XML描述2D圖形的語言。

2.2. SVG基于XML, 這意味著SVG DOM中的每個元素都是可用的。您可以為某個元素附加JavaScript事件處理器。

2.3. 在SVG中, 每個被繪制的圖形均被視為對象。如果SVG對象的屬性發生變化, 那么瀏覽器能夠自動重現圖形。

3. Canvas

3.1. Canvas通過JavaScript來繪制2D圖形。

3.2. Canvas是逐像素進行渲染的。

3.3. 在Canvas中, 一旦圖形被繪制完成, 它就不會繼續得到瀏覽器的關注。如果其位置發生變化, 那么整個場景也需要重新繪制, 包括任何或許已被圖形覆蓋的對象。

4. Canvas與SVG的比較

4.1. Canvas

?4.1.1. 依賴分辨率。

?4.1.2. 不支持事件處理器。

?4.1.3. 弱的文本渲染能力。

?4.1.4. 能夠以.png或.jpg格式保存結果圖像。

?4.1.5. 最適合圖像密集型的游戲, 其中的許多對象會被頻繁重繪。

4.2. SVG

?4.2.1. 不依賴分辨率。

?4.2.2. 支持事件處理器。

?4.2.3. 最適合帶有大型渲染區域的應用程序(比如谷歌地圖)。

?4.2.4. 復雜度高會減慢渲染速度(任何過度使用DOM的應用都不快)。

?4.2.5. 不適合游戲應用。

總結

以上是生活随笔為你收集整理的080_html5 Canvas和SVG的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。