JavaScript 在绘制新线之前清除画布

问题描述

我有一个以画布形式展示的图表，当用户在我的表单中输入一个数字时，我想绘制一条水平线。

每次用户输入一个新的数字时，都会绘制一条新的线，并且旧的线仍然显示出来。我只想一次只显示一条线。如何实现这个目标？

var c = document.getElementById("chartCanvas");
var ctx = c.getContext("2d");
let userInput = document.getElementById("userInput");

function drawIndexLine(index) {
  ctx.moveTo(index, 0);
  ctx.lineTo(index, 150);
  ctx.stroke();
}

userInput.addEventListener('change', function() {
  let value = Number(this.value);
  drawIndexLine(value);
})

canvas {
  border: solid;
}

<p>enter number <input id="userInput" type="number"></p>
<canvas id="chartCanvas"></canvas>

解决方案

清除画布的一种快速简单的方法是更新至少一个维度 – 即使是同样的尺寸。请注意，这种方法可能会重置笔触和填充设置，但对于此处所提到的用例来说并不是问题。

这里有一个可行的示例：

var canvas = document.getElementById("chartCanvas");
var ctx = canvas.getContext("2d");
let userInput = document.getElementById("userInput");

function drawIndexLine(index) {
  ctx.canvas.width = ctx.canvas.width;
  ctx.moveTo(index, 0);
  ctx.lineTo(index, 150);
  ctx.stroke();
}

userInput.addEventListener('change', function() {
  let value = Number(this.value);
  drawIndexLine(value);
})

canvas {
  border: solid;
}

<p>enter number <input id="userInput" type="number"></p>
<canvas id="chartCanvas"></canvas>

另外，仅仅作为一个附注，这些线是竖直的而不是水平的。