Javascript 为什么上下文笔划重画画布上的旧图形

在下面的示例中，当按下两个按钮时，在画布上绘制两条不同的线，如何使第二个按钮清除旧线并绘制另一条线

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

<button onclick="draw()">first</button>

<button onclick="draw2()">second</button>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.strokeStyle = "red";

function draw(){
ctx.moveTo(0,0);
ctx.lineTo(100,200);
ctx.stroke();
}

function draw2(){
ctx.clearRect(0, 0, c.width, c.height);
ctx.moveTo(100,0);
ctx.lineTo(0,200);
ctx.stroke();
}

</script>

第一
第二
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.strokeStyle=“红色”；
函数绘图（）{
ctx.moveTo（0,0）；
ctx.lineTo（100200）；
ctx.stroke（）；
}
函数draw2（）{
ctx.clearRect（0，0，c.宽度，c.高度）；
ctx.moveTo（100,0）；
ctx.lineTo（0200）；
ctx.stroke（）；
}

---

我正在使用

clearRect

函数来清除画布，但是当在第二个图形上调用stroke时，第一个图形将被重新绘制。

您必须调用

.beginPath（）

来清除当前路径并启动一个新路径。在您的情况下，看起来您可以在两个函数的开头都这样做。

非常感谢，这就是我要找的！