如果这篇文章对你有所帮助，点个赞呗！！！
绘制路径
绘制路径需要先调用beginPath，表示要开始绘制路径，再调用以下方法来绘制路径。
lineTo(x, y)：绘制一条从上一个点到(x, y)的直线moveTo(x, y)：不绘制线条，只是把画笔移动到(x, y)- 更多
绘制完路径后，可以指定fillStyle属性并调用fill方法来填充路径，也可以指定strokeStyle属性并调用stoke方法来描画路径。
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
// 创建路径
context.beginPath();
// 绘制圆弧，参数分别是圆心x坐标、圆形y坐标、圆弧半径、圆弧起始点(单位：弧度)、圆弧终点(单位：弧度)、绘制方向(false为顺时针绘制，true为逆时针绘制)
context.arc(100, 100, 99, 0, 2 * Math.PI, true);
// context.fillStyle = 'pink'
// context.fill()
context.strokeStyle = "pink";
context.stroke();
}
还可以调用clip方法创建一个新的剪切区域。
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
// 创建路径
context.beginPath();
// 绘制圆弧，参数分别是圆心x坐标、圆形y坐标、圆弧半径、圆弧起始点(单位：弧度)、圆弧终点(单位：弧度)、绘制方向(false为顺时针绘制，true为逆时针绘制)
context.arc(100, 100, 50, 0, 2 * Math.PI, true);
context.fillStyle = "pink";
context.clip();
context.fillRect(0, 0, 100, 100);
}上面的扇形怎么出来的呢？
我们可以把clip变成fill，看下没有被剪切的话，是什么样子。
也就是说，实际上剪切就是两个图形相交部分。
如果使用lineTo需要注意：没有设置moveTo时，这个位置并不是(0, 0)，而是空，所以第一次的lineTo没法画出结果。
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
// 创建路径
context.beginPath();
// context.moveTo(0, 0);
context.lineTo(100, 50);
context.lineTo(200, 0);
context.lineWidth = 8;
context.strokeStyle = "pink";
// 描画路径
context.stroke();
}没有moveTo：
有moveTo：
beginPath 的作用
上面的例子中，beginPath并没有作用，也就是说上面的例子中，其实有没有beginPath都一样。那么beginPath有什么作用呢？
beginPath表示下面绘制的图形是一个新的路径。具体看下实例。
const context = mycanvas.getContext("2d");
// 创建路径
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 50);
context.lineWidth = 8;
context.strokeStyle = "pink";
// 描画路径
context.stroke();
context.lineTo(200, 0);
context.strokeStyle = "purple";
context.stroke();
想要的效果是画出两条不一样颜色的线，但是最后是一种颜色折线，这是因为我们只是用了一次beginPath，所以就会把这两条线当成同一个路径，最后调用的stroke就会把原本是粉色的线再用紫色画一遍，所以最终的效果就是只有一条折线。
所以需要使用beginPath创建新路径，新的路径还是会有没有设置moveTo时，这个位置并不是(0, 0)，而是空的问题，所以需要使用moveTo设置位置
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
// 创建路径
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 50);
context.lineWidth = 8;
context.strokeStyle = "pink";
context.stroke();
context.beginPath();
// 创建新的路径，需要重新设置位置
context.moveTo(100, 50);
context.lineTo(200, 0);
context.strokeStyle = "purple";
context.stroke();
}
closePath 的作用
有可能会陷进closePath是结束路径的误区，认为closePath就是beginPath的配套。但是closePath和beginPath并不是配套的，它们的功能不一样。所以closePath之后的路径也不是新的路径，只有beginPath才行。
而closePath的作用是将最近绘制的路径闭合，和之前有没有beginPath无关。
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
// context.beginPath(); // 有无`beginPath`都没有影响
context.moveTo(10, 10);
context.lineTo(100, 50);
context.lineTo(20, 70);
context.closePath();
context.lineWidth = 8;
context.strokeStyle = "pink";
context.stroke();
}
上面我们只绘制了两条线，但是最终得到的结果是一个三角形，这是因为我们使用closePath把最近绘制的路径闭合了。
绘制文本
绘制文本有两种方法。
fillText：使用fillStyle属性绘制文本strokeText：使用strokeStyle属性绘制文本
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
context.moveTo(10, 10);
context.lineTo(150, 75);
context.lineTo(30, 100);
context.closePath();
context.lineWidth = 1;
context.strokeStyle = "pink";
context.fillStyle = "purple";
context.fillText("CLZ", 50, 60);
context.strokeText("CLZ", 50, 80);
context.stroke();
}
可以通过font、textAlign、textBaseline属性设置文本的字体、对齐方式、基线。
示例：
context.font = "700 16px Arial";
textAlign：
- 如果是
start，那么 x 坐标就是文本的左侧坐标 - 如果是
center，那么 x 坐标就是文本的中心点坐标 - 如果是
end，那么 x 坐标就是文本的右侧坐标
const mycanvas = document.getElementById("mycanvas");
// 确保浏览器支持canvas
if (mycanvas.getContext) {
const context = mycanvas.getContext("2d");
context.moveTo(10, 10);
context.lineTo(150, 75);
context.lineTo(30, 100);
context.closePath();
context.lineWidth = 1;
context.strokeStyle = "pink";
context.font = "700 16px Arial";
context.fillStyle = "purple";
context.textAlign = "start";
context.strokeText("CLZ", 50, 50);
context.textAlign = "center";
context.fillText("CLZ", 50, 65);
context.textAlign = "end";
context.strokeText("CLZ", 50, 80);
context.stroke();
}
textBaseline类似
