HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。css
畫布是一個矩形區域,您能夠控制其每一像素。html
canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。html5
與其餘圖像格式相比(好比 JPEG 和 GIF),使用 SVG 的優點在於:canvas
SVG 是一種使用 XML 描述 2D 圖形的語言。瀏覽器
SVG 基於 XML,這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。網絡
在 SVG 中,每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化,那麼瀏覽器可以自動重現圖形。dom
Canvas 經過 JavaScript 來繪製 2D 圖形。編輯器
Canvas 是逐像素進行渲染的。svg
在 canvas 中,一旦圖形被繪製完成,它就不會繼續獲得瀏覽器的關注。若是其位置發生變化,那麼整個場景也須要從新繪製,包括任何或許已被圖形覆蓋的對象。性能
Canvas | Svg |
---|---|
基於像素的(動態png) | 基於形狀的 |
單個html元素 | 多種多樣的形狀dom元素 |
只能經過script修改 | script和css均可以修改 |
事件模型和用戶交互須要使用像素(x, y) | 事件模型和用戶交互抽象到元素(rect, path) |
繪圖面積小或者對象大於10k時性也能很好 | 繪圖面積很大或者對象小於10k的時候性能很好 |
svg和canvas均可以表現圖表(如柱狀圖, 散點圖, 餅圖等等), 在選擇開源的第三方庫繪圖的時候應該要注意根據使用場景來選擇
<!--老版本的svg的用法--> <iframe src="01.svg" width="300" height="100"></iframe>
<!-- H5 新增了svg的標籤--> <svg width="400px" height="400px"> <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="10" /> <rect x="120" y="120" width="100" height="100" style="fill:green;stroke:red;stroke-width: 20;"/> </svg>