记录一下Canvas和SVG的区别

在网上看到面试经常会问到Canvas和SVG的区别，所以就参考了网上大家说的知识点，记录一下。

首先简单说一下Canvas

canvas是H5中新增的标签，官方解释说canvas是一块画布，可以在网页中绘制图像，话不多说，来个例子

<svg id="svgelem" height="200"> 
       <circle id="greencircle" cx="60" cy="60" r="50" fill="#1E81FF" /> 
</svg>

再了解一下svg

svg即可缩放矢量图形，什么是矢量图形呢，也就是放大或者缩小不会失真的图形。svg绘图时，每个图形都是以DOM节点的形式插入到页面中的，我们可以通过js来直接操作这些图形。

区别

1. Canvas 主要是用笔刷来绘制 2D 图形的。
2. SVG 主要是用标签来绘制不规则矢量图的。
3. 相同点：都是主要用来画 2D 图形的。
4. 不同点：Canvas 画的是位图，SVG 画的是矢量图。
5. 不同点：SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。
6. 不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。