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()，视觉差异立刻出现。

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

立即学习“前端免费学习笔记（深入）”；

路径起点被意外移动导致 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 不帮你做决定，只提供工具。哪条线该连、连到哪、什么时候连——全得你自己心里有数，代码里写清楚。