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 |
瀏覽器相容性
載入中…