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