Canvas和SVG是html5中支持2種可視化技術，都是可以在畫布上繪制圖形和放入圖片。下面來介紹和分析一下他們。
一.Canvas 和 SVG 簡介
1.什么是Canvas？
Canvas 是H5新出來的標簽<canvas></canvas>
Canvas畫布，利用JavaScript在網頁繪制圖像
在標簽中給上寬高：<canvas width="800" height="800"></canvas> 不用加單位
如果在css中給寬高 會對圖像造成拉伸 （默認寬高300px*150px）
通過過去繪制工具 .getContext("2d") 來在畫布中繪制圖形
2.什么是SVG？
SVG 可縮放矢量圖形（Scalable Vector Graphics），基於可擴展標記語言XML 出來的時間比較老
SVG 用來定義用於網格的基於矢量的圖形
二.Canvas 和 SVG 區別
1.繪制的圖片格式不同
Canvas 的工具getContext 繪制出來的圖形或傳入的圖片都依賴分辨率，能夠以 .png 和 .jpg格式保存存儲圖像，可以說是位圖
SVG 可以在H5中直接繪制，但繪制的是矢量圖
由於位圖依賴分辨率，矢量圖不依賴分辨率，所以Canvas和SVG的圖片格式的不同實際上是他們繪制出來的圖片的格式不同造成的。
2.Canvas不支持事件處理器，SVG支持事件處理器
Canvas 繪制的圖像 都在Canvas這個畫布里面，是Canvas的一部分，不能用js獲取已經繪制好的圖形元素。
如下：
在控制台中可以看到canvas標簽里面是沒有單獨的長方形存在的。
Canvas就像動畫，每次顯示全部的一幀的內容，想改變里面某個元素的位置或者變化需要在下一幀中全部重新顯示。
而SVG繪圖時，每個圖形都是以DOM節點的形式插入到頁面中，可以用js或其他方法直接操作
如下：
效果：
可以看出svg 標簽下面多了兩個矩形的標簽
下面我們來操作新出來的矩形標簽：
給上rect標簽id r1 和 r2
獲取元素
var rect1 = document.getElementById("r1");
var rect2 = document.getElementById("r2");
改變元素的填充顏色：
rect1.style.fill = "yellow";
rect2.style.fill = "pink";
效果：
SVG 中 每個被繪制的圖形都被視為對象，如果SVG對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
3.適用范圍不同
由於Canvas 和 SVG 的工作機制不同，
Canvas是逐像素進行渲染的，一旦圖形繪制完成，就不會繼續被瀏覽器關注。而SVG是通過DOM操作來顯示的。
所以Canvas的文本渲染能力弱，而SVG最適合帶有大型渲染區域的應用程序，比如地圖。
而Canvas 最適合有許多對象要被頻繁重繪的圖形密集型游戲。
而SVG由於DOM操作 在復雜度高的游戲應用中 會減慢渲染速度。所以不適合在游戲應用。