canvas 是什么
canvas 是 H5 中新增的标签，官方解释说 canvas 是一块画布，可以在网页中绘制图像，举个例子：
- HTML
<canvas id="canvas"></canvas>
- JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
- 结果
SVG 是什么
svg即可缩放矢量图形，什么是矢量图形呢，也就是放大或者缩小不会失真的图形。 svg绘图时，每个图形都是以DOM节点的形式插入到页面中的，我们可以通过js来直接操作这些图形。
二者的区别
- canvas 绘画出来的图形一般成为位图，也就是放大缩小的情况下会出现失真的情况，svg 绘制的图形是矢量图，不存在失真的情况
- canvas 绘制的图形不会出现在 DOM 结构中，svg 绘制的会存在于 DOM 结构，这就导致 svg 节点过多时渲染慢，canvas 性能更好一点，但写起来更复杂
- canvas 类似于动画，每次图形的改变都是先清除原来的图形，然后把新的图形画上去，svg 则是可以直接通过 js 来进行某些操作
- canvas 依赖于分辨率，svg 不依赖分辨率
