源码
const ele = document.querySelector('#smile') const ctx = ele.getContext('2d');ctx.beginPath();
ctx.moveTo(10, 10);
ctx.strokeStyle = 'red';
ctx.lineTo(10, 50);
ctx.closePath();
ctx.stroke();
ctx.strokeStyle = 'blue';
ctx.moveTo(10, 50);
ctx.lineTo(60, 50);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(10, 70);
ctx.strokeStyle = 'red';
ctx.lineTo(10, 120);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(10, 120);
ctx.lineTo(100, 120);
ctx.closePath();
ctx.stroke();
第一个直角为啥两条边的颜色不是红色和蓝色呢，而第二个直角却是呢
原因是就是我在第二个直角的第二条变绘制的时候加了beginPath
我看了半天官网，也没有看明白，为啥我加了beginPath就符合预期，我觉得官网没有讲明白这个
自己踩的坑还的自己来填，我觉得是这样的：
fill()和stroke()绘图都是在绘制上一个beginPath的路径的closePath()很多同学都会误解，包括我自己，都会认为closePath是结束路径的绘制，实际不是这样的，closePath只是绘制一条连接当前点和开始点的直线，仅此而已
我相信每个学习canvas的同学学到这里都会有这个疑惑，实际就是对下图这几个点没有很好的理解
