如果让你口述Canvas和SVG的区别你会怎么说？
最近在看论坛的时候，我发现我对于Canvas和SVG的使用倒是没遇到过啥问题，但要让我总结这俩的区别，我是真说不上来；但求知欲让我查阅MDN，逛掘金和其他论坛，我决定自己总结一篇博客，记录自己的学习之路。
先说总结：
Canvas
- 根据MDN官方文档的描述，可得知：Canvas API 提供了一个通过JavaScript 和 HTML的
<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 - 使用：用javascript获取到canvas标签的dom节点后，调用其
getContext('2d')方法使图像在该dom上被渲染。 - MDN给的小案例
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
- 效果
- 当然Canvas不止于此，我曾经用Canvas做出了一个小案例星图，有兴趣可以点击查看
SVG
-
MDN给予SVG的解释是：可缩放矢量图形（Scalable Vector Graphics，SVG）基于 XML 标记语言，用于描述二维的矢量图形。
-
使用：平时基本用于对于图片的定义和展示，具体使用文档，还是查看MDN吧，这里一两句说不明白在 HTML 内容中应用 SVG 效果 - SVG：可缩放矢量图形 | MDN (mozilla.org)
-
用最简洁的话来说，SVG就是可缩放矢量图形，也就是说放大或缩小都不会失真。SVG绘图时，每个图形都是以DOM节点的形式插入到页面中的，也就是说可以用js直接操作这些图形
两者相同处
- 所用之处基本相同，即都是用来操作2D图形的
两者不同之处
-
canvas绘画出的图形叫位图，也就是放大或缩小可能会出现失真的情况，但SVG绘制的图形为矢量图，放大缩小不会出现失真的情况。
-
canvas绘制的图形不会出现在DOM结构中，而SVG绘制的会直接存在于DOM结构中，说人话就是性能方面canvas更好，并且当SVG节点过多时就会渲染更慢，Canvas性能会更好，但写起来更复杂。
-
canvas依赖于分辨率，svg不依赖分辨率
-
canvas最适合图像密集型的游戏，其中的许多对象会被频繁重绘，svg不适合游戏应用
