canvas 與 SVG都能夠使你在瀏覽器中畫圖,但它們的基本原理不同,接下來將對(duì)canvas 與 SVG的畫圖原理進(jìn)行介紹,感興趣的朋友可以了解下
SVG
SVG是一種在XML中描述二維圖形的語言。
SVG是基于XML的,意味著在SVG DOM內(nèi)每一個(gè)元素都是可用的。你可以為每一個(gè)元素增加JS事件處理器。
在SVG中,每一個(gè)圖形被記作一個(gè)對(duì)象。如果一個(gè)SVG對(duì)象的屬性發(fā)生改變,瀏覽器可以自動(dòng)重新生成圖形。
Canvas
Canvas能夠在fly上畫2D圖形(使用JS)
Canvas能夠按照像素重新生成。
在Canvas中,一旦圖形完成,就會(huì)被瀏覽器忘記。如果圖形位置要發(fā)生改變,那么整個(gè)屏幕需要重畫,包括圖形覆蓋的對(duì)象。
Canvas 和SVG的比較
下表顯示了canvas與SVG的主要不同點(diǎn):
Canvas | SVG |
依賴分辨率 | 獨(dú)立于分辨率 |
不支持事件處理器 | 支持事件處理器 |
弱文本渲染能力 | 最適合具有大渲染面積的應(yīng)用(谷歌地圖) |
可以保存最終圖片為PNG或者JPG | 復(fù)雜圖像,重畫變慢(任何使用DOM很多的情況都會(huì)變慢) |
最適合許多 對(duì)象頻繁重畫的圖形游戲 | 不適合游戲應(yīng)用 |