HTML5中canvas與SVG有哪些區別

這篇文章主要介紹了HTML5中canvas與SVG有哪些區別，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

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.strokeStyle="pink";
	yuan.arc(50,50,50,0,Math.PI*2,true);
	 yuan.stroke();
</script>

可以看出圖片放大時邊框周圍有鋸齒

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畫出的圖形放大不會失真。

感謝你能夠認真閱讀完這篇文章，希望小編分享HTML5中canvas與SVG有哪些區別內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!