不需要使用
beginPath
和
closePath
。
画布上下文有一个当前路径。您可以使用
moveTo
和
lineTo
等方法向该路径添加指令。构建完路径后,您可以使用
stroke
和
fill
等方法,使用当前路径在画布上绘制。
closePath
是另一条指令。使用
fill
时可能不会注意到它的效果,但使用
stroke
时,它将(实质上)回到起始位置,"关闭"路径。比较并对比:
ctx.moveTo(10, 10); ctx.moveTo(10, 10);
ctx.lineTo(90, 10); ctx.lineTo(90, 10);
ctx.lineTo(90, 90); ctx.lineTo(90, 90);
ctx.closePath();
ctx.stroke(); ctx.stroke();
beginPath
,另一方面,会放弃之前的路径并允许您开始新的路径。如果没有它,您将会不断地将更多内容附加到之前的路径上,这可能是不可取的。下面进行比较和对比:
![一条红线和一条蓝线](https://istack.dev59.com/xRkYe.webp)
ctx.moveTo(10, 10); ctx.moveTo(10, 10);
ctx.lineTo(90, 10); ctx.lineTo(90, 10);
ctx.lineWidth = 4; ctx.lineWidth = 4;
ctx.strokeStyle = "red"; ctx.strokeStyle = "red";
ctx.stroke(); ctx.stroke();
ctx.beginPath();
ctx.moveTo(10, 20); ctx.moveTo(10, 20);
ctx.lineTo(90, 20); ctx.lineTo(90, 20);
ctx.lineWidth = 2; ctx.lineWidth = 2;
ctx.strokeStyle = "blue"; ctx.strokeStyle = "blue";
ctx.stroke(); ctx.stroke();
beginPath
会丢弃当前路径。如果你想要回到旧的路径,你需要调用beginPath
来丢弃当前路径,然后从单个指令中重建旧的路径。(我不太明白你所说的“索引类型情况”是什么意思。) - icktoofay