1、Canvas是一个可以使用 JS 等脚本语言向其中绘制图像的 HTML 标签,为解决只能在 Web 页面中显示静态图片的问题,出现了 Canvas 标签。它是一个绘图表面,包含一组丰富的 JS API,这些 API 使你能够动态创建和操作图像及动画。
2、SVG(Scalable Vector Graphics,可缩放矢量图形)是基于 XML 用于描述二维矢量图形的一种图形格式。SVG 可以用来定义 XML 格式的矢量图形。其本质是 XML 文件,所以 SVG 是使用 XML 文档描述来绘图的。
3、相同点: 都是用来画 2D 图形的。
4、不同点:SVG 创建的每一个元素都是一个独立的 DOM 元素,而Canvas 只是一个 HTML 元素,其中的图形不会单独创建 DOM 元素。SVG 主要是矢量图,而Canvas是位图。SVG 节点过多时渲染慢一些,Canvas 性能更好一些,但写起来更复杂。