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 |
浏览器兼容性
加载中…