Question

我的画布上画了一些线条。我想清除它以便我可以绘制一些新的线条正如大家所暗示的那样，我使用context.clearRect(0, 0, canvas.width, canvas.height);。但是当我绘制一些新线条时，我之前绘制的所有线条都重新出现使用canvas.width = canvas.width技巧时，它会按预期工作。

我错过了什么？

Answer 1

您可能没有结束以前的路径。在绘制新行之前，请务必致电ctx.beginPath()。

const ctx = canvas.getContext('2d');
function draw()
{
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath(); // <-
  ctx.moveTo(0, 0);
  ctx.lineTo(100, 100);
  ctx.stroke();
}
function drawFaulty()
{
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 200);
  ctx.stroke();
}

<canvas id="canvas" width="200" height="200"></canvas><br/>
<button onclick="draw()">Clear and Draw</button><br/>
<button onclick="drawFaulty()">Clear and Draw - Faulty</button>

JavaScript画布：当使用context.clearRect清除时，所有内容都会在下一次绘制时重新开始

1 个答案: