【推薦課程：HTML5教程】

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言，它基于XML也就是我們可以為某個元素附加JavaScript事件處理器，如果SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

Canvas

Canvas 通過 JavaScript 來繪制 2D 圖形。它是逐像素進行渲染的，一旦圖形被繪制完成，如果它的位置發生了變化，那么整個場景都需要重新繪制，包括任何或者已經被覆蓋的對象

SVG與canvas的區別

（1）SVG是用來描述XML中2D圖形的語言，canvas借助JavaScript動態描繪2D圖形

（2）SVG可支持事件處理程序而canvas不支持

（3）SVG中屬性改變時，瀏覽器可以重新呈現它，適用于矢量圖，而canvas不可以，更適合視頻游戲等。

（4）canvas可以很好的繪制像素，用于保存結果為png或者gif,可做為API容器。

（5）canvas取決于分辨率。SVG與分辨率無關。

（6）SVG具有更好的文本渲染，而Canvas不能很好的渲染，渲染中的SVG可能比Canvas慢，特別是應用了大量的DOM。

（7）畫布更適合渲染較小的區域。SVG渲染更好的更大區域。

SVG與canvas之間的比較

案例分析

canvas繪制一個圓

 canvas id= circle /canvas  script type= text/javascript  var circle=document.getElementById( circle  var yuan=circle.getContext( 2d  yuan.beginPath(); yuan.stroke >
可以看出圖片放大時邊框周圍有鋸齒
SVG繪畫一個圓
 ?xml version= 1.0 standalone= no ?  svg width= 100% height= 100% version= 1.1  circle cx= 100 cy= 50 r= 40 stroke= pink stroke-width= 2 fill= #fff /  /svg 
可以看出SVG畫出的圖形放大不會失真。
總結：以上就是本篇文章的全部內容了，希望通過本篇文章使大家對canvas和SVG的區別有一定的了解。
以上就是HTML5中canvas與SVG有什么區別的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。