什么是 Canvas？
canvas 是 html5 提供的新元素，使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*
在使用canvas时候，不可用css来定义canvas的宽度
因为当画布缩放的同时，内部的图像也会随之缩放，这是就会出现图像失真的情况
*/
canvas {
background-color: #aaa;
}
</style>
</head>
<body>
<canvas width="500" height="500">浏览器不支持canvas</canvas>
<!-- 这就是canvas标签，当浏览器不支持canvas标签的时候就会在浏览器展示出浏览器不支持canvas这段话 -->
<script>
const canvas = document.querySelector('canvas')
// 绘图环境
const ctx = canvas.getContext('2d')
function img() {
// ctx.drawImage(图像对象，坐标，宽高)
const imgObj = new Image() // new 一个图像对象
imgObj.src = './1.png'
// 在这里要注意，一点要在 imgObj.onload 内部再使用 ctx.drawImage, 否则会画图失败
imgObj.onload = function () {
ctx.drawImage(imgObj, 100, 100, 300, 300)
}
// ctx.drawImage(imgObj,100,100,300,300)
}
img()
</script>
</body>
</html>
什么是 SVG？
svg 即可缩放矢量图形，什么是矢量图形呢，也就是放大或者缩小不会失真的图形。svg绘图时，每个图形都是以 DOM 节点的形式插入到页面中的，我们可以通过 js 来直接操作这些图形。
矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由点连接的线。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。
svg 并不是 html5 专有的标签，最初 svg 是用 xml 技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。
Canvas 和 SVG 区别
-
Canvas 主要是用笔刷来绘制 2D 图形的。
-
SVG 主要是用标签来绘制不规则的矢量图。
-
相同点：都是主要用来画 2D 图形的。
-
不同点：Canvas 画的是位图（能以 .png 或 .jpg 格式保存结果图像）；SVG 画的是矢量图。
-
不同点：SVG 节点过多时渲染慢（标签过多），Canvas 性能会好一些，但写起来更复杂（JavaScript 代码手写控制像素）。
-
不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库来实现。