Javascript 带滑块的控制变量

我想用范围滑块控制可变长度，这样滑块就可以增加或减少线的长度

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var slider=document.getElementById（“slider”）；
变量长度=450
context.beginPath（）；
上下文。移动到（100100）；
lineTo（长度，100）；
stroke（）；
slider.addEventListener（“更改”，函数（）{
长度=滑块值；
})
setInterval（函数（）{
长度=滑块值；
}，100）

---

我认为您不需要间隔，只需在事件处理程序函数中重新绘制行（清理后）；也许使用“输入”事件更好

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var slider = document.getElementById("slider");
var length = 450

context.beginPath();
context.moveTo(100, 100);
context.lineTo(length, 100);
context.stroke();


slider.addEventListener("input", function() { 
    length = slider.value; 
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.moveTo(100, 100);
    context.lineTo(length, 100);
    context.stroke();
})

---

如果要更改整条线的长度，必须重新绘制整条线。下面是它如何工作的一个示例：

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var slider=document.getElementById（“slider”）；
变量长度=450
context.beginPath（）；
上下文。移动到（100100）；
lineTo（长度，100）；
stroke（）；
slider.addEventListener（“更改”，函数（）{
长度=滑块值；
context.clearRect（0，0，canvas.width，canvas.height）；//清除整个画布
context.beginPath（）；//使用新长度绘制线
上下文。移动到（100100）；
lineTo（长度，100）；
stroke（）；
})
//您不需要setInterval。

---

在更改事件中，调用函数并传递长度值以清除画布，然后重新绘制线条

var canvas=document.getElementById（'myCanvas'），
context=canvas.getContext（'2d'），
slider=document.getElementById（“slider”），
长度=450；
//您可以添加此行，以便在更改事件发生之前将滑块与该行同步
slider.value=长度；
重画（长度）；
slider.addEventListener（“更改”，函数（）{
长度=滑块值；
重画（长度）；
});
函数重画（长度）{
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
上下文。移动到（100100）；
lineTo（长度，100）；
stroke（）；
}

---

请详细说明哪些有效或无效。