CanvasRenderingContext2D：closePath() 方法
Canvas 2D API 的CanvasRenderingContext2D.closePath()方法尝试从当前点到当前子路径的起点添加一条直线。如果形状已经闭合或只有一个点，则此函数不执行任何操作。
语法
js
closePath()
参数
无。
返回值
无（undefined）。
示例
闭合三角形
此示例使用lineTo()方法创建三角形的最初两条（对角线）边。之后，使用closePath()方法创建三角形的底边，该方法会自动连接形状的第一点和最后一点。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
三角形的角点位于 (20, 140)、(120, 10) 和 (220, 140)。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 140); // Move pen to bottom-left corner
ctx.lineTo(120, 10); // Line to top corner
ctx.lineTo(220, 140); // Line to bottom-right corner
ctx.closePath(); // Line to bottom-left corner
ctx.stroke();
结果
仅闭合一个子路径
此示例绘制一个由三个不连接的子路径组成的笑脸。
注意：虽然在创建所有弧线后调用了closePath()，但只有最后一个弧线（子路径）被闭合。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
前两个弧线创建了脸部的眼睛。最后一个弧线创建了嘴巴。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();
结果
规范
| 规范 |
|---|
| HTML 标准 # dom-context-2d-closepath-dev |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。