Javascript 基于变量绘制画布线

我和Arduino一起工作，我用的是加速度计。我想根据加速计的

x

和

y

变量制作一条2D线

我正在尝试使用以下代码：

board.on("ready", () => {
  const accelerometer = new Accelerometer({
    controller: "MPU6050"
  });
  accelerometer.on("change", function () {
    const {
      acceleration,
      inclination,
      orientation,
      pitch,
      roll,
      x,
      y,
      z
    } = accelerometer;
      const $yPos = y * 100 * 10;
      const $canvas = document.querySelector(`.simulation__line`);
        if ($canvas.childElementCount > 0) {
          $canvas.innerHTML = ``;
        }
      const drawing = $canvas.getContext("2d");
      drawing.beginPath();
      drawing.moveTo(1000, 1000 - $yPos);
      drawing.lineTo(0,  1000);
      drawing.lineTo(-1000, 1000 + $yPos);
      drawing.stroke();
      drawing.clearRect(1000, $yTest, drawing.width, drawing.height);  
  });
});

---

所以每次加速计改变变量时，它都会画一条新的线。这会产生很多行，但我只想要一个不断变化的行。我尝试使用if语句

if（$canvas.childElementCount>0）

，但这没有帮助。

下面是一个在画布上用变量绘制某物的非常简单的示例。
我相信您的问题在于您使用

clearRect

清除画布的方式

函数绘图（）{
y=document.getElementById（“滑块”）.value
clearRect（0，0，canvas.width，canvas.height）；
ctx.fillRect（0，y，250，3）；
}
//初始化画布
var canvas=document.getElementById（'canvas'）；
canvas.height=（canvas.width=250）/2；
var ctx=canvas.getContext（'2d'）；
draw（）；

这是一个非常简单的示例，可以用变量在画布上绘制某物。
我相信您的问题在于您使用

clearRect

清除画布的方式

函数绘图（）{
y=document.getElementById（“滑块”）.value
clearRect（0，0，canvas.width，canvas.height）；
ctx.fillRect（0，y，250，3）；
}
//初始化画布
var canvas=document.getElementById（'canvas'）；
canvas.height=（canvas.width=250）/2；
var ctx=canvas.getContext（'2d'）；
draw（）；

使用

drawing.clearRect（0,0，drawing.width，drawing.height）在绘制新行之前清除函数顶部的画布当我这样做时，它仍然保持绘制行为什么要清除画布的innerHTML？html画布中的元素仅在浏览器不支持画布时显示。使用
drawing.clearRect（0,0，drawing.width，drawing.height）在绘制新行之前清除函数顶部的画布当我这样做时，它仍然保持绘制行为什么要清除画布的innerHTML？html画布中的元素仅在浏览器不支持画布时显示。