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

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

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

Canvas

說(shuō)明：

使用JavaScript繪制2D圖形。

逐像素渲染。

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

Svg

Description:

由XML描述的二維圖形語(yǔ)言

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

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

比較

畫(huà)布

分辨率相關(guān)

不支持事件處理程序

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

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

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

SVG

分辨率無(wú)關(guān)

事件處理器支持

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

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

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