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

Question

让以下示例在画布上按下两个按钮时绘制两条不同的行，如何使第二个按钮清除旧行并绘制另一行？

<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>

我正在使用clearRect函数来清除画布，但是当在第二个图形上调用笔划时，第一个图形被重新绘制。

Answer 1

您必须致电.beginPath()清除当前路径并开始新路径。在您的情况下，看起来您可以在两个函数的开头处执行此操作。