Canvas 和 SVG 都允許我們在瀏覽器中創(chuàng)建圖形涧郊，但是它們在根本上是不同的飒泻。
Svg
1钾虐、 SVG 基于 XML噪窘，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器效扫。（支持事件處理倔监，容易編輯）
2、 在 SVG 中菌仁，每個(gè)被繪制的圖形均被視為對象浩习。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形济丘。
3谱秽、SVG是基于矢量的（不依賴分辨率，放大不失幀）
4摹迷、不適合游戲應(yīng)用（SVG要加載到DOM中弯院，所以性能上不如canvas）
canvas
1 、Canvas 通過 JavaScript 來繪制 2D 圖形
2泪掀、在 canvas 中听绳，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關(guān)注异赫。如果其位置發(fā)生變化椅挣，那么整個(gè)場景也需要重新繪制头岔，（不斷重繪的過程）
3、不支持事件處理器
4鼠证、像素圖（依賴分辨率）
5峡竣、能夠以 .png 或 .jpg 格式保存結(jié)果圖像
對于我們平常開發(fā)而言最直觀的區(qū)別在于：
1.對于畫在Canvas上的部件，你需要處理重繪量九。而SVG則不用适掰，你修改svg dom則系統(tǒng)會自動幫你重繪
2.Hittest，即canvas不負(fù)責(zé)幫你偵測鼠標(biāo)/觸摸事件發(fā)生在哪一個(gè)圖形元件上荠列；而svg可以类浪。
3.Canvas效率高得多
那我們應(yīng)該在什么時(shí)候使用Canvas什么時(shí)候使用svg呢？
一般情況下肌似，隨著屏幕大小的增大费就，畫布將開始降級，因?yàn)樾枰L制更多的像素川队。隨著屏幕上的對象數(shù)目增多力细，SVG開始逐漸和canvas拉開差距以下方面的不同一定也會引起變化：實(shí)現(xiàn)和平臺、是否使用完全硬件加速的圖形固额，以及js引擎的速度眠蚂。
下面是一些我在開發(fā)過程中遇到的一些問題。
1 斗躏、當(dāng)需要根據(jù)后臺返回?cái)?shù)據(jù)逝慧，設(shè)置canvas的fillstyle的時(shí)候，由于是定時(shí)不斷的取這些數(shù)據(jù)瑟捣，設(shè)置5秒就需要重繪一遍，于是時(shí)間越長我繪制圖像的顏色一直在變栅干，越來越深
解決： ? canvas繪制動畫的時(shí)候,每一步都是不斷重繪的過程迈套。所以在每一次動畫前都需要清除畫布 ?
ctx.clearRect(0,0,canvasWidth,canvasHeight) ? ? ? ? ?//清除畫布
2 、在繪制動畫的時(shí)候碱鳞，要確保當(dāng)圖片加載進(jìn)來后在進(jìn)行繪制桑李。
image.onload=function( ) { ?start() } ? ? ? ? //start（）是動畫開始
3、在想要繪制不同顏色的圖形時(shí)窿给，要先填充顏色贵白！在繪制圖形！１琅荨禁荒！
ctx.fillStyle="red"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // fillStyle是設(shè)置圖形填充顏色 ? （邊框和填充默認(rèn)是黑色！）
ctx.strokeStyle="blue"; ? ? ? ? ? ? ? ? ? ? ? ? ? ?//strokeStyle是設(shè)置圖形邊框顏色
ctx.fill(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//填充繪制 ? ? ? ? ? ??
ctx.stroke(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//邊框繪制 ? ? ? ? ? ?（兩個(gè)都調(diào)用角撞，才能得到藍(lán)邊框紅內(nèi)容的）
