HTML5中canvas與SVG有什么區(qū)別

【推薦課程：HTML5教程】

SVG

SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言，它基于XML也就是我們可以為某個(gè)元素附加JavaScript事件處理器，如果SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

Canvas

Canvas 通過(guò) JavaScript 來(lái)繪制 2D 圖形。它是逐像素進(jìn)行渲染的，一旦圖形被繪制完成，如果它的位置發(fā)生了變化，那么整個(gè)場(chǎng)景都需要重新繪制，包括任何或者已經(jīng)被覆蓋的對(duì)象

SVG與canvas的區(qū)別

（1）SVG是用來(lái)描述XML中2D圖形的語(yǔ)言，canvas借助JavaScript動(dòng)態(tài)描繪2D圖形

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

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

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

（5）canvas取決于分辨率。SVG與分辨率無(wú)關(guān)。

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

（7）畫(huà)布更適合渲染較小的區(qū)域。SVG渲染更好的更大區(qū)域。

SVG與canvas之間的比較

案例分析

canvas繪制一個(gè)圓

<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>

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

SVG繪畫(huà)一個(gè)圓

<?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畫(huà)出的圖形放大不會(huì)失真。

總結(jié)：以上就是本篇文章的全部?jī)?nèi)容了，希望通過(guò)本篇文章使大家對(duì)canvas和SVG的區(qū)別有一定的了解。

以上就是HTML5中canvas與SVG有什么區(qū)別的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！