closePath() 方法简单讲解

---

一、含义

closePath() 是 Canvas 2D 上下文中的方法，它的作用是关闭当前路径，即从当前路径的终点画一条直线回到路径的起点，形成一个封闭的图形。

---

二、词源

单词	词源	含义
close	拉丁语 clausus（关闭）	关闭、闭合
Path	古希腊语 pathos（路径）	路径、轨迹
closePath	组合词	闭合路径

---

三、语法

ctx.closePath();

• 参数：无

• 返回值：无

• 作用：绘制一条从当前点到路径起点的直线，使路径闭合

---

四、直观比喻

想象你用笔画一个三角形：

动作	对应代码	效果
移动到第一个点	moveTo(50, 50)	笔定位到 (50,50)
画线到第二个点	lineTo(100, 50)	画第一条边
画线到第三个点	lineTo(75, 100)	画第二条边
闭合路径	closePath()	自动画线回到起点 (50,50)

---

五、closePath() 与 lineTo() 的区别

不用 closePath()

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(75, 100);
// 没有闭合，只是一个折线
ctx.stroke();  // 画出一个"V"形，缺少底边

用 closePath()

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(75, 100);
ctx.closePath();  // 自动添加一条线从(75,100)回到(50,50)
ctx.stroke();     // 画出完整的三角形（三条边）

用 lineTo() 手动闭合

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(75, 100);
ctx.lineTo(50, 50);  // 手动画线回到起点
ctx.stroke();        // 效果和 closePath() 一样

---

六、在五子棋中的应用

五子棋代码中没有直接用 closePath()，但如果要画实心的棋子，就会用到：

// 画一个黑色的棋子（实心圆）
ctx.beginPath();
ctx.arc(x, y, 15, 0, 2 * Math.PI);  // 画一个完整的圆
ctx.closePath();      // 闭合路径（对于完整的圆不是必需的，但好习惯）
ctx.fillStyle = 'black';
ctx.fill();           // 填充成实心圆

对于完整的圆，closePath() 不是必需的，因为 arc() 方法已经定义了一个封闭的形状。但在画多边形时，closePath() 就非常重要。

---

七、总结

问题	答案
closePath() 是什么？	闭合当前路径的方法
它会做什么？	从当前点画线回到路径起点
什么时候需要？	画封闭图形（三角形、多边形）时
不调用会怎样？	图形不封闭，缺少最后一条边
在五子棋中？	画棋子时可用，但不是必需的