1. Canvas和SVG都允許您在瀏覽器中創(chuàng)建圖形, 但是它們?cè)诟旧鲜遣煌摹?/p>

2. SVG

2.1. SVG是一種使用XML描述2D圖形的語(yǔ)言。

2.2. SVG基于XML, 這意味著SVG DOM中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加JavaScript事件處理器。

2.3. 在SVG中, 每個(gè)被繪制的圖形均被視為對(duì)象。如果SVG對(duì)象的屬性發(fā)生變化, 那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

3. Canvas

3.1. Canvas通過(guò)JavaScript來(lái)繪制2D圖形。

3.2. Canvas是逐像素進(jìn)行渲染的。

3.3. 在Canvas中, 一旦圖形被繪制完成, 它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化, 那么整個(gè)場(chǎng)景也需要重新繪制, 包括任何或許已被圖形覆蓋的對(duì)象。

4. Canvas與SVG的比較

4.1. Canvas

?4.1.1. 依賴分辨率。

?4.1.2. 不支持事件處理器。

?4.1.3. 弱的文本渲染能力。

?4.1.4. 能夠以.png或.jpg格式保存結(jié)果圖像。

?4.1.5. 最適合圖像密集型的游戲, 其中的許多對(duì)象會(huì)被頻繁重繪。

4.2. SVG

?4.2.1. 不依賴分辨率。

?4.2.2. 支持事件處理器。

?4.2.3. 最適合帶有大型渲染區(qū)域的應(yīng)用程序(比如谷歌地圖)。

?4.2.4. 復(fù)雜度高會(huì)減慢渲染速度(任何過(guò)度使用DOM的應(yīng)用都不快)。

?4.2.5. 不適合游戲應(yīng)用。

總結(jié)

以上是生活随笔為你收集整理的080_html5 Canvas和SVG的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。