绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是 闭合 的，即：起点和终点是连接的
步骤
使用路径绘制图形需要一些额外的步骤：
- 创建路径起始点。
- 使用画图命令去画出路径。
- 把路径封闭。
一旦路径生成，就能通过描边或填充路径区域来渲染图形。
函数
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。closePath()
闭合路径，即：绘制一条直线连接起点到终点。如果图形是已经闭合了的，该函数什么也不做。
应用场景：当需要绘制 封闭图形 时，才需要使用，如：绘制三角形、梯形、菱形
fill()
通过填充路径的内容区域生成实心的图形。
当调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以不需要调用 closePath() 函数。
例子
三条直线不能绘制三角形
详见：
https://www.malaoshi.top/show_1IX8ZnQUhw6V.html
闭合方式-绘制三角形
<canvas width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
console.log(ctx)
// ctx.beginPath()
// 移动到三角形最上面的点
ctx.moveTo(100,50)
// 从最上面的点 到 左下点，画直线
ctx.lineTo(70,100)
// 从左下点 到 右下点，画直线
ctx.lineTo(130,100)
// 闭合，成为三角形，不会缺一块
ctx.closePath()
// 设置线的宽度
// ctx.lineWidth = 1
ctx.lineWidth = 15
// 绘制线
ctx.stroke();
</script>
填充
<canvas width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
console.log(ctx)
// ctx.beginPath()
// 移动到三角形最上面的点
ctx.moveTo(100,50)
// 从最上面的点 到 左下点，画直线
ctx.lineTo(70,100)
// 从左下点 到 右下点，画直线
ctx.lineTo(130,100)
// 闭合，成为三角形
ctx.closePath()
// 填充，默认为黑色
ctx.fill();
</script>
参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes