javascript - 为什么上下文描边会重绘 Canvas 上的旧图

Question

在下面的例子中，按下两个按钮时在 Canvas 上画了两条不同的线，我怎样才能让第二个按钮清除旧线并画另一条线？

<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 函数来清除 Canvas ，但是当在第二个绘图上调用 stroke 时，第一个被重绘。

Answer 1

您必须调用 .beginPath() 来清除当前路径并开始一个新路径。在您的情况下，您似乎可以在两个函数的每个函数的开头执行此操作。