Javascript JS范围滑块不使用JS画布

我用简单的JS画布线条绘制了这个3D立方体。我的问题是，当我试图更改其中一个变量，以便可以通过滑块手动更改它时，其中包含变量的行将不会加载。我认为它与滑块有关，因为如果我只给变量赋值一个像50这样的数字，那么它的加载就非常好了。我将附加带滑块的断开代码，然后附加不带滑块的工作代码。我希望有人能帮忙。谢谢

带滑块的断开代码：

var v=document.getElementById（'v1'）； var y=v.值； var c=document.getElementById（“myCanvas”）； var ctx=c.getContext（“2d”）； 函数加载（）{ ctx.clearRect（0,0,300,150）； ctx.beginPath（）； ctx.strokeStyle=“黑色”； //天际线 ctx.moveTo（0,50）； ctx.lineTo（300,50）； //中心箱线 ctx.移动到（150，y+30）； ctx.lineTo（150，y+70）； //边线 //左 ctx.移动到（150，y+30）； ctx.lineTo（120，y+25）； ctx.移动到（150，y+70）； ctx.lineTo（120，y+55）； //对 ctx.移动到（150，y+30）； ctx.lineTo（180，y+25）； ctx.移动到（150，y+70）； ctx.lineTo（180，y+55）； //箱边 ctx.移动到（120，y+25）； ctx.lineTo（120，y+55）； ctx.移动到（180，y+25）； ctx.lineTo（180，y+55）； ctx.移动到（120，y+25）； ctx.lineTo（150，y+20）； ctx.移动到（180，y+25）； ctx.lineTo（150，y+20）； ctx.stroke（）； ctx.closePath（）； }; window.requestAnimationFrame（加载）

范围滑块的值将是一个

字符串

，因此您必须通过将其解析为一个数字，代码才能工作

var v=document.getElementById（'v1'）； 变量y=parseInt（v.value）； //^----我所做的改变 var c=document.getElementById（“myCanvas”）； var ctx=c.getContext（“2d”）； 函数加载（）{ ctx.clearRect（0,0,300,150）； ctx.beginPath（）； ctx.strokeStyle=“黑色”； //天际线 ctx.moveTo（0,50）； ctx.lineTo（300,50）； //中心箱线 ctx.移动到（150，y+30）； ctx.lineTo（150，y+70）； //边线 //左 ctx.移动到（150，y+30）； ctx.lineTo（120，y+25）； ctx.移动到（150，y+70）； ctx.lineTo（120，y+55）； //对 ctx.移动到（150，y+30）； ctx.lineTo（180，y+25）； ctx.移动到（150，y+70）； ctx.lineTo（180，y+55）； //箱边 ctx.移动到（120，y+25）； ctx.lineTo（120，y+55）； ctx.移动到（180，y+25）； ctx.lineTo（180，y+55）； ctx.移动到（120，y+25）； ctx.lineTo（150，y+20）； ctx.移动到（180，y+25）； ctx.lineTo（150，y+20）； ctx.stroke（）； ctx.closePath（）； }; window.requestAnimationFrame（加载）

在您的第一个代码示例中，您没有在侦听滑块上的更改，或者您的代码中有一部分丢失了链接！这就是问题的一部分：）谢谢你的帮助在4分钟内，我可以给你打勾。不用担心，很高兴不推…，但我如何使它在滑块更新时在

load（）

函数中加载代码？你需要在滑块的

onChange

中添加一个事件侦听器。