CANVAS畫布與SVG的區別

CANVAS是html5提供的新元素<canvas>，而svg存在的歷史要比canvas久遠，svg並非html5專有的標籤，最初svg是用xml技術（超文本擴展語言，能夠自定義標籤或屬性）描述二維圖形的語言。在H5中看似canvas與svg很像，可是，他們有巨大的差異。

CANVAS

• 　　Canvas 是經過 JavaScript 來繪製 2D 圖形。
• 　　Canvas 是逐像素進行渲染的。
•        在Canvas中，一旦圖形被繪製完成，他就不會繼續獲得瀏覽器的關注，若是他的位置發生變化，那麼就須要從新來繪製圖形，其中包括任何或已經被圖形覆蓋的對象。

SVG

•        Svg 是使用 XML 描述的 2D 圖形。
•        Svg 是基於 XML 的，這也就是說 SVG DOM 中的每一個元素都是可用的。能夠爲某個元素附加 JavaScript 事件處理器。
•        在 SVG 中，每一個被繪製過的圖形均視爲對象，若是 SVG 對象的屬性發生變化，那麼瀏覽器能夠自行重現圖形。

     比較

Canvas

1. 依賴分辨率
2. 不支持事件處理器
3. 文本渲染力弱
4. 可以以 .png 或 .jpg 的格式保存結果圖形
5. 最合適圖像密集型的遊戲，其中許多的對象會被頻繁的重繪

SVG

1. 不依賴分辨率
2. 支持事件處理器
3. 最合適帶有大型渲染區域的應用程序（如，百度地圖、谷歌地圖等等）
4. 不適合遊戲的應用
5. 複雜度高會減慢渲染的速度
6. 以單個文件的形式獨立存在，後綴名爲.svg，能夠在html文件中以img標籤的src，元素背景，框架等引入 或者 直接在html文件中引入SVG標籤

 從功能上來講

CANVAS能夠看作是一個畫布。，其繪製出來的圖形爲標量圖，所以，能夠在canvas中引入jpg或png這類格式的圖片，在實際開發中，大型的網絡遊戲都是用canvas畫布作出來的，而且canvas的技術如今已經至關的成熟。另外，咱們喜歡用canvas來作一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪製的圖形爲矢量圖，因此其用法上受到了限制。由於只能繪製矢量圖，因此svg中不能引入普通的圖片，由於矢量圖的不會失真的效果，在項目中咱們會用來作一些動態的小圖標。可是因爲其本質爲矢量圖，能夠被無限放大而不會失真，因此就很適合來作地圖。

從操做上來講

咱們要讓canvas裏面的一個圖片跟隨鼠標事件：canvas.onmouseover=function(){}。而svg支持事件的綁定。另外canvas中咱們繪製圖形一般是經過javascript來實現，svg更多的是經過標籤來來實現，如在svg中繪製正矩形形就要用<rect>，這裏咱們不能用屬性style="width:XXX;height:XXX;"來定義。