Canvas 和 SVG 都是 HTML5 中推荐的也是主要的2D图形绘制技术
-
Canvas 基于像素,提供 2D 绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图案;
-
SVG为矢量图,提供一系列图形元素
(Rect,Path,Circle,Line...)
;还有完整的动画,时间机制,本身就能独立使用,也可以嵌入到HTML中。
区别:
- Canvas 提供功能更原始,动态渲染和大数据量绘制
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以.png 或 .jpg 格式保存结果图像
- 最适合图像密集型游戏,其中的许多对象会被频繁的重绘。
- SVG功能更完善,适合静态图片展示,高保证文档查看和打印的应用场景;
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
- 不适合游戏应用