首頁 > web前端 > H5教程 > HTML5中Canvas與SVG的畫圖原理比較_html5教學技巧

HTML5中Canvas與SVG的畫圖原理比較_html5教學技巧

WBOY
發布: 2016-05-16 15:50:02
原創
1573 人瀏覽過

canvas 與 SVG都能夠使你在瀏覽器中畫圖,但它們的基本原理不同。
SVG
SVG是一種在XML中描述二維圖形的語言。
SVG是基於XML的,表示在SVG DOM內每一個元素都是可用的。你可以為每一個元素增加JS事件處理器。
在SVG中,每一個圖形被記作一個物件。如果一個SVG物件的屬性改變,瀏覽器可以自動重新產生圖形。

Canvas
Canvas能夠在fly上繪製2D圖形(使用JS)
Canvas能夠依照像素重新產生。

在Canvas中,一旦圖形完成,就會被瀏覽器忘記。如果圖形位置要改變,那麼整個螢幕需要重畫,包括圖形覆蓋的物件。

Canvas 與SVG的比較
下表顯示了canvas與SVG的主要不同點:

Canvas          SVG
依赖分辨率      独立于分辨率
不支持事件处理器 支持事件处理器
弱文本渲染能力 最适合具有大渲染面积的应用(谷歌地图)
可以保存最终图片为PNG或者JPG 复杂图像,重画变慢(任何使用DOM很多的情况都会变慢)
最适合许多 对象频繁重画的图形游戏        不适合游戏应用
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板