HTML5中Canvas與SVG的畫(huà)圖原理比較
發(fā)布時(shí)間：2013-01-16 18:18:29 作者：佚名 
我要評(píng)論
我要評(píng)論canvas 與 SVG都能夠使你在瀏覽器中畫(huà)圖，但它們的基本原理不同,接下來(lái)將對(duì)canvas 與 SVG的畫(huà)圖原理進(jìn)行介紹，感興趣的朋友可以了解下
canvas 與 SVG都能夠使你在瀏覽器中畫(huà)圖，但它們的基本原理不同。
SVG
SVG是一種在XML中描述二維圖形的語(yǔ)言。
SVG是基于XML的，意味著在SVG DOM內(nèi)每一個(gè)元素都是可用的。你可以為每一個(gè)元素增加JS事件處理器。
在SVG中，每一個(gè)圖形被記作一個(gè)對(duì)象。如果一個(gè)SVG對(duì)象的屬性發(fā)生改變，瀏覽器可以自動(dòng)重新生成圖形。
Canvas
Canvas能夠在fly上畫(huà)2D圖形（使用JS）
Canvas能夠按照像素重新生成。
在Canvas中，一旦圖形完成，就會(huì)被瀏覽器忘記。如果圖形位置要發(fā)生改變，那么整個(gè)屏幕需要重畫(huà)，包括圖形覆蓋的對(duì)象。
Canvas 和SVG的比較
下表顯示了canvas與SVG的主要不同點(diǎn)：
SVG
SVG是一種在XML中描述二維圖形的語(yǔ)言。
SVG是基于XML的，意味著在SVG DOM內(nèi)每一個(gè)元素都是可用的。你可以為每一個(gè)元素增加JS事件處理器。
在SVG中，每一個(gè)圖形被記作一個(gè)對(duì)象。如果一個(gè)SVG對(duì)象的屬性發(fā)生改變，瀏覽器可以自動(dòng)重新生成圖形。
Canvas
Canvas能夠在fly上畫(huà)2D圖形（使用JS）
Canvas能夠按照像素重新生成。
在Canvas中，一旦圖形完成，就會(huì)被瀏覽器忘記。如果圖形位置要發(fā)生改變，那么整個(gè)屏幕需要重畫(huà)，包括圖形覆蓋的對(duì)象。
Canvas 和SVG的比較
下表顯示了canvas與SVG的主要不同點(diǎn)：
| Canvas | SVG |
| 依賴分辨率 | 獨(dú)立于分辨率 |
| 不支持事件處理器 | 支持事件處理器 |
| 弱文本渲染能力 | 最適合具有大渲染面積的應(yīng)用（谷歌地圖） |
| 可以保存最終圖片為PNG或者JPG | 復(fù)雜圖像，重畫(huà)變慢（任何使用DOM很多的情況都會(huì)變慢） |
| 最適合許多 對(duì)象頻繁重畫(huà)的圖形游戲 | 不適合游戲應(yīng)用 |
相關(guān)文章
詳解FireFox下Canvas使用圖像合成繪制SVG的Bug
這篇文章主要介紹了詳解FireFox下Canvas使用圖像合成繪制SVG的Bug，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-07-10html5中svg canvas和圖片之間相互轉(zhuǎn)化思路代碼
需要把網(wǎng)頁(yè)部分內(nèi)容做正文，并把原網(wǎng)頁(yè)轉(zhuǎn)成pdf作為附件，發(fā)送郵件給boss，將svg轉(zhuǎn)成canvas顯示，但是后來(lái)發(fā)現(xiàn)canvas也無(wú)法正常顯示，最后不得已，只能將canvas標(biāo)簽再一次轉(zhuǎn)2014-01-24HTML5之SVG 2D入門(mén)13—svg對(duì)決canvas及長(zhǎng)處和適用場(chǎng)景分析
到目前為止，SVG與Canvas的主要特性均已經(jīng)總結(jié)完畢了,現(xiàn)在，我們就來(lái)比對(duì)一下這兩種技術(shù)，分析一下它們的長(zhǎng)處和適用場(chǎng)景,感興趣的朋友可以了解下哦，或許對(duì)你有所幫助2013-01-30- Canvas和SVG都是HTML5中的圖形渲染技術(shù)，那么你知道這兩種有哪些區(qū)別嗎，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2023-05-11