1. Canvas
canvas 是 HTML5 提供的新元素，主要是用笔刷来绘制2D图形的，主要有以下特征
- 通过 js 来绘制 2D图形
- canvas 图像单位是像素
- canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。
2. SVG
SVG主要是用标签来绘制不规则矢量图的，
- svg 使用 XML 描述的2D图像。
- SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JS 事件处理器。
- svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。
3.Canvas和SVG的区别
相同点
都是主要用来画2D图形的
不同点
- Canvas 画的是位图，SVG 画的是矢量图
(svg 放大不会失真，但是 canvas 绘制的图形会失真) - SVG 节点过多时渲染慢*，Canvas 性能更好一点，但写起来更复杂。
- SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。
- canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
4.应用
功能
canvas 是一个画布，绘制出来的图形是位图，因此 canvas 可以绘制图片，在实际应用中，由于渲染性能高，所以大型游戏开发都用的 canvas 。除此之外，还有统计中常见的柱状图、饼图、雷达图等也使用的 canvas 。
而 svg 绘制的是矢量图，放大后不会失真，所以很适合做地图。
操作方面
canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器
但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg。
