CanvasRenderingContext2D：beginPath() 方法

基线 广泛可用

此功能已得到很好的建立，并且可在许多设备和浏览器版本中使用。它自以下版本起在所有浏览器中都可用 2015 年 7 月.

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅