CanvasRenderingContext2D：closePath() 方法
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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); // 将笔移到左下角
ctx.lineTo(120, 10); // 连线到顶角
ctx.lineTo(220, 140); // 连线到右下角
ctx.closePath(); // 连线到左下角
ctx.stroke();
结果
只闭合一个子路径
这个例子绘制了一个笑脸，由三个不相连的子路径组成。
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();
结果
规范
| Specification |
|---|
| HTML # dom-context-2d-closepath-dev |