HTML5中Canvas和SVG網(wǎng)頁繪制圖形的區(qū)別？canvas和SVG都允許在瀏覽器中創(chuàng)建圖形，但它們有本質(zhì)的不同。Canvas說明：使用JavaScript繪制2D圖形。逐像素渲染。其位置發(fā)生變化

HTML5中Canvas和SVG網(wǎng)頁繪制圖形的區(qū)別？

canvas和SVG都允許在瀏覽器中創(chuàng)建圖形，但它們有本質(zhì)的不同。

Canvas

說明：

使用JavaScript繪制2D圖形。

逐像素渲染。

其位置發(fā)生變化并重新繪制。

Svg

Description:

由XML描述的二維圖形語言

Svg基于XML，這意味著Svg DOM中的每個元素都可用，并且可以將JavaScript事件處理程序附加到元素。

在SVG中，每個圖形都被視為一個對象。如果SVG對象的屬性發(fā)生變化，瀏覽器可以自動再現(xiàn)圖形。

比較

畫布

分辨率相關(guān)

不支持事件處理程序

文本呈現(xiàn)能力弱

在中呈現(xiàn)的能力。PNG或。Jpg格式保存結(jié)果圖像

最適合圖像密集型游戲，其中許多對象經(jīng)常被重繪

SVG

分辨率無關(guān)

事件處理器支持

最適合渲染面積大的應(yīng)用程序（如谷歌地圖）

高復(fù)雜度會降低渲染速度（任何過度使用DOM（速度不快）

不適用于游戲應(yīng)用程序