html5-----Canvas vs SVG

Canvas 和 SVG 都是 HTML5 中推荐的也是主要的2D图形绘制技术

---

• Canvas 基于像素，提供 2D 绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图案；

• SVG为矢量图，提供一系列图形元素（Rect，Path，Circle，Line...）；还有完整的动画，时间机制，本身就能独立使用，也可以嵌入到HTML中。

区别：

• Canvas 提供功能更原始，动态渲染和大数据量绘制

1. 依赖分辨率
2. 不支持事件处理器
3. 弱的文本渲染能力
4. 能够以.png 或 .jpg 格式保存结果图像
5. 最适合图像密集型游戏，其中的许多对象会被频繁的重绘。

• SVG功能更完善，适合静态图片展示，高保证文档查看和打印的应用场景；

1. 不依赖分辨率
2. 支持事件处理器
3. 最适合带有大型渲染区域的应用程序（比如谷歌地图）
4. 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5. 不适合游戏应用