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() 方法用于从当前点添加一条直线到当前子路径的起点。如果形状已经闭合或只有一个点，此函数将不执行任何操作。

该方法并不直接在画布上绘制任何内容。你可以使用 stroke() 或 fill() 方法来渲染路径。

语法

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 Standard
# dom-context-2d-closepath-dev

浏览器兼容性

BCD tables only load in the browser

参见