closePath() 本身不绘制，仅连接当前点与路径起点，需配合 stroke() 或 fill() 才可见；fill() 会隐式闭合，stroke() 则不会；闭合效果取决于 moveTo() 设置的起点及路径顺序。
canvas.closePath() 为什么没效果
调用 closePath() 后线条没自动闭合，通常是因为它本身不画线，只收尾路径——它只是把当前点连回路径起始点（moveTo() 的位置），但不会自动 stroke() 或 fill()。
- 必须在
closePath()后显式调用stroke()或fill()，否则什么也看不到 - 如果路径里没用过
moveTo()，closePath()会尝试连回“默认起点”（通常是画布左上角 0,0），结果往往错位 - 多个子路径共存时，
closePath()只关闭最近一次beginPath()之后的那条路径
示例：正确闭合三角形
ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); ctx.lineTo(100, 150); ctx.closePath(); // ← 这里只是连回 (50,50)，没画 ctx.stroke(); // ← 必须加这句才显示闭合轮廓
fill() 和 stroke() 对闭合行为的影响差异
fill() 隐含闭合逻辑，stroke() 则严格按路径走——这是最常被忽略的兼容性细节。
-
fill()在绘制前会自动补一条线，把终点连回起点（等效于隐式调用closePath()），所以即使漏掉closePath()，填充区域看起来也是闭合的 -
stroke()完全不补线，终点和起点之间就是断开的，除非你手动lineTo()或调用closePath() - 混合使用时（比如先
fill()再stroke()），fill()的隐式闭合不影响stroke()路径，后者仍按原始路径描边
验证方式：画一个三边 lineTo() 而不 closePath()，分别只 fill() 和只 stroke()，视觉差异立刻出现。
立即学习“前端免费学习笔记（深入）”；
路径起点被意外移动导致 closePath 失效
看似调用了 closePath()，但闭合线歪了或消失了，大概率是中间穿插了未察觉的 moveTo() 或其他绘图操作改变了“当前点”。
-
beginPath()不重置起点，只清空路径指令；真正决定起点的是最后一次moveTo()或首个lineTo() -
arc()、quadraticCurveTo()等函数执行后，当前点会移到终点，影响后续closePath()的连接目标 - 调试技巧：在
closePath()前加console.log(ctx.currentPoint)（需 polyfill）或用getLineDash()等副作用方法粗略判断状态
SVG path 语法 vs canvas 路径闭合的混淆
从 SVG 转过来的人容易直接套用 Z 命令逻辑，但 canvas 没有“自动闭合路径命令”，closePath() 是独立控制指令，不是路径数据的一部分。
- SVG 中
d="M10 10 L90 10 L50 90 Z"的Z是路径字符串一部分；canvas 中没有类似语法，必须拆成 JS 调用 - Canvas 路径一旦
beginPath()，所有绘图操作都累积到当前路径对象，closePath()是最后一步“收口”，不能写在中间 - 动态生成路径时，别用字符串拼接模拟 SVG，老老实实按顺序调用
moveTo()→lineTo()→closePath()
闭合这件事，canvas 不帮你做决定，只提供工具。哪条线该连、连到哪、什么时候连——全得你自己心里有数，代码里写清楚。
