html5 中的SVG 和canvas

想到昨天看資料的時候，發現html5 中的SVG 和canvas 均可以表示圖形，那它們到底有哪些區別呢？該如何正確的使用它們呢？

一、SVG：可縮放矢量圖形，（Scalable Vector Graphics），SVG使用XML格式定義圖像。

canvas:<canvas> 標籤訂義圖形，好比圖表和其餘圖像;<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。

二、<canvas> 標記和 SVG 的另一個重要的不一樣點是：(VML我尚未了解過，後續會進行了解並記錄)

<canvas> 有一個基於 JavaScript 的繪圖 API，而 SVG  使用一個 XML 文檔來描述繪圖。

這兩種方式在功能上是等同的，任何一種均可以用另外一種來模擬。從表面上看，它們很不相同，但是，每一種都有強項和弱點。

例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。要從同一圖形的一個 <canvas> 標記中移除元素，每每須要擦掉繪圖從新繪製它。

三、svg繪製出來的每個圖形元素都是獨立的DOM節點，可方便後期綁定事件或修改，而canvas輸出的是一整幅畫布；

svg輸出的圖形是矢量的，後期能夠修改參數來自由放大縮小，無失真，canvas輸出標量畫布，就像一張圖片同樣。

四、svg是一種在網頁上畫矢量圖的方法，結構基於XML。他和canvas最大的不一樣，就是他的每一個圖形都是獨立的,都具備一個「html標籤」，均可以分別操做（這點和flash有點相似）

canvas畫出的圖形都是附在canvas區域之上，但圖形都是不可操做的，若是要操做圖形，就是直接操做整個canvas，即清空canvas和重繪。

 

下面是最後整理出的結果哦；

canvas和svg的共同點：

一、都是HTML5的新標籤；

二、均可以用css和js進行操做；

三、瀏覽器對它們的支持度還不是很高；

canvas和svg的區別：

一、SVG的圖形被稱爲矢量圖，canvas的圖形被稱爲位圖；

二、SVG的每一個圖形都是獨立的標籤，能夠進行獨立操做，canvas元素只有一個標籤，裏面的全部圖形爲一個總體，若是要對canvas圖像進行操做，只能清除掉在重繪；

三、SVG話200個圓，頁面中就可能有200個標籤，而canvas畫200個圓，頁面中就仍是隻有一個canvas元素；

四、SVG圖形能夠夾帶文本，seo(搜索引擎)能很好的搜索到相關信息，seo是搜索不到canvas的。

 

那麼兩種標籤都基本能達到咱們想要的結果，在這種狀況下咱們該如何判斷使用哪一種標籤呢？

svg 使用：

svg因爲是矢量圖，因此他對點線面這樣的圖形很擅長，他徹底能夠用來實現一個web的Excel圖形報表。

svg跨PC和移動端

svg不擅長作複雜的動畫，由於它的動畫牽扯的元素太多了——牽一髮而動全身,同時動畫N個元素的效率是不會高的

特別要注意，svg不能實現太複雜的效果，只要他的標籤一多，效率就急劇降低

canvas使用：

canvas雖然每次動畫都要重繪畫布，但他效率尚可，能夠製做不是十分複雜的動畫效果，遊戲，與audio標籤等結合，能夠作出不錯的遊戲。

canvas之因此擅長動畫，是由於他會清空畫布，不會形成元素累積過多卡死瀏覽器

它跨PC和移動平臺，毫無壓力

注意：canvas的繪圖過程必須講究技巧，否則仍是極可能卡死瀏覽器。

 

寫完這個，我本身對這兩個標籤有了必定的瞭解，也但願看到這篇博客的朋友能對這兩個標籤有新的認識哦，我是新手，還需加油(●'◡'●)。