css3動畫效果屬性canvas和svg的區別有哪些

本文小編為大家詳細介紹“css3動畫效果屬性canvas和svg的區別有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css3動畫效果屬性canvas和svg的區別有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

區別：1、canvas畫的是位圖，而svg畫的是矢量圖；2、canvas節點多時渲染較快，而svg節點多時渲染較慢；3、svg支持分層和事件，而canvas不支持；4、canvas依賴分辨率，而svg不依賴分辨率。

本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3動畫效果屬性canvas和svg的區別是什么

Canvas主要是用筆刷來動態畫2D圖

SVG主要是用標簽來繪制不規則的矢量圖

兩個都主要是用來畫2D圖形的

不同點：

• Canvas畫的是位圖，但是SVG畫的是矢量圖

• SVG節點多時渲染慢，Canvas性能更好，但是寫起來比較復雜

• SVG支持分層和事件，Canvas不支持，但是可以用庫來實現

• Canvas依賴分辨率，SVG不依賴分辨率

• Canvas繪制出來的圖形不會出現在DOM當中，但是SVG繪制的會出現在DOM當中

Canvas優勢：

適合游戲等場所，同時Canvas繪制出來的圖形可以導出

SVG優勢：

因為是矢量圖，所以放大之后也不會失真，支持事件處理，文字獨立，可以進行編輯和搜索

讀到這里，這篇“css3動畫效果屬性canvas和svg的區別有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。