CanvasRenderingContext2D: beginPath() 方法
Canvas 2D API 的 CanvasRenderingContext2D.beginPath() 方法透過清空子路徑列表來開始一個新路徑。當您想要建立一個新路徑時，請呼叫此方法。
注意：要建立與當前畫布狀態匹配的新子路徑，您可以使用 CanvasRenderingContext2D.moveTo()。
語法
js
beginPath()
引數
無。
返回值
無（undefined）。
示例
建立獨立的路徑
本示例建立了兩個路徑，每個路徑包含一條線。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
在開始繪製每條線之前都呼叫了 beginPath() 方法，以便它們可以使用不同的顏色進行繪製。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// First path
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
// Second path
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-beginpath-dev |
瀏覽器相容性
載入中…