HTML5中canvas與SVG有什麼差別-html教學-PHP中文網

HTML5中canvas與SVG有什麼差別

清浅

發布： 2018-11-28 09:35:30

原創

4694 人瀏覽過

今天會和大家分享的是有關JavaScript中canvas與SVG的區別，有一定的參考作用，希望對大家有所幫助

【推薦課程：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的比較

#SVGcanvas 不可擴充#支援DOM與事件沒有事件支援




	##可擴充

#不依賴解析度

解析度依賴

Image 19.jpg

在渲染複雜區域時可能會更慢

不適合較大或複雜的區域

Image 20.jpg

呈現較好的區域（DOM除外）

渲染較小的區域

#更好的向量圖 ###### 更適合動畫（影片）與圖片 #############不適合API###### 適合API ############ 適合API ############ ##很好地呈現文字 ######無法很好地呈現文字 ##################案例分析########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畫出的圖形放大不會失真。 ######總結：以上就是這篇文章的全部內容了，希望透過本篇文章使大家對canvas和SVG的差異有一定的了解。 ###### ###

以上是HTML5中canvas與SVG有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！