兩者比較一覽
| Canvas | Svg |
|---|---|
| 基于像素的(動態(tài)png) | 基于形狀的 |
| 單個html元素 | 多種多樣的形狀dom元素 |
| 只能通過script修改 | script和css都可以修改 |
| 事件模型和用戶交互需要使用像素(x, y) | 事件模型和用戶交互抽象到元素(rect, path) |
| 繪圖面積小或者對象大于10k時性也能很好 | 繪圖面積很大或者對象小于10k的時候性能很好 |
性能對比曲線圖
canvas vs svg 性能(來源microsoft開發(fā)社區(qū))
使用場景舉例
- svg
1.靜態(tài)圖像
2.高保真文檔(用于展示和打印) - canvas
1.處理視頻
2.復(fù)雜場景么伯、實時復(fù)雜數(shù)學(xué)動畫
3.基于圖像位置的快速計算處理
圖表和圖形
svg和canvas都可以表現(xiàn)圖表(如柱狀圖, 散點圖, 餅圖等等), 在選擇開源的第三方庫繪圖的時候應(yīng)該要注意根據(jù)使用場景來選擇
以下情況使用svg為佳:
- 數(shù)據(jù)源是或者類似xml(svg)文檔
- 需要用戶交互
- 使用到css就可以滿足大部分樣式需求
但是如果需要更高的速度, 那么需要使用canvas: - 地圖交互: 查找路徑
- 復(fù)雜工程流程圖
- 網(wǎng)頁游戲
使用場景一覽
