JS范围滑块不适用于JS画布答案

【问题标题】：JS ranged slider not working with JS canvasJS范围滑块不适用于JS画布
【发布时间】：2021-05-12 21:43:56
【问题描述】：

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

带滑块的断码：

var v = document.getElementById('v1');
var y = v.value;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function load() {
  ctx.clearRect(0, 0, 300, 150);
  ctx.beginPath();
  ctx.strokeStyle = "black";
  //skyline
  ctx.moveTo(0, 50);
  ctx.lineTo(300, 50);
  //center box line
  ctx.moveTo(150, y + 30);
  ctx.lineTo(150, y + 70);
  //side lines

  //left
  ctx.moveTo(150, y + 30);
  ctx.lineTo(120, y + 25);
  ctx.moveTo(150, y + 70);
  ctx.lineTo(120, y + 55);
  //right
  ctx.moveTo(150, y + 30);
  ctx.lineTo(180, y + 25);
  ctx.moveTo(150, y + 70);
  ctx.lineTo(180, y + 55);

  //box sides
  ctx.moveTo(120, y + 25);
  ctx.lineTo(120, y + 55);
  ctx.moveTo(180, y + 25);
  ctx.lineTo(180, y + 55);


  ctx.moveTo(120, y + 25);
  ctx.lineTo(150, y + 20);



  ctx.moveTo(180, y + 25);
  ctx.lineTo(150, y + 20);
  ctx.stroke();
  ctx.closePath();

};
window.requestAnimationFrame(load)

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas><br>
  <input type="range" id="v1" min="1" max="100" value="50">


</body>

</html>

我不知道为什么代码不起作用。我现在无法访问语法检查器，所以我可能会遇到错误，但我看不出它为什么不起作用。

这是没有范围滑块的工作代码。

代码不错，但没有滑块：

var y = 50;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function load() {
  ctx.clearRect(0, 0, 300, 150);
  ctx.beginPath();
  ctx.strokeStyle = "black";
  //skyline
  ctx.moveTo(0, 50);
  ctx.lineTo(300, 50);
  //center box line
  ctx.moveTo(150, y + 30);
  ctx.lineTo(150, y + 70);
  //side lines

  //left
  ctx.moveTo(150, y + 30);
  ctx.lineTo(120, y + 25);
  ctx.moveTo(150, y + 70);
  ctx.lineTo(120, y + 55);
  //right
  ctx.moveTo(150, y + 30);
  ctx.lineTo(180, y + 25);
  ctx.moveTo(150, y + 70);
  ctx.lineTo(180, y + 55);

  //box sides
  ctx.moveTo(120, y + 25);
  ctx.lineTo(120, y + 55);
  ctx.moveTo(180, y + 25);
  ctx.lineTo(180, y + 55);


  ctx.moveTo(120, y + 25);
  ctx.lineTo(150, y + 20);



  ctx.moveTo(180, y + 25);
  ctx.lineTo(150, y + 20);
  ctx.stroke();
  ctx.closePath();

};
window.requestAnimationFrame(load)

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas><br>




</body>

</html>

【问题讨论】：

您没有在第一个代码示例中监听滑块上的更改，或者您的代码中缺少那部分代码
谢谢！这是问题的一部分:)

标签： javascript html html5-canvas

【解决方案1】：

范围滑块的值将是 string，因此您必须通过 parseInt 将其解析为数字，您的代码才能正常工作。

var v = document.getElementById('v1');
var y = parseInt(v.value);
//       ^---- The change I made

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function load() {
  ctx.clearRect(0, 0, 300, 150);
  ctx.beginPath();
  ctx.strokeStyle = "black";
  //skyline
  ctx.moveTo(0, 50);
  ctx.lineTo(300, 50);
  //center box line
  ctx.moveTo(150, y + 30);
  ctx.lineTo(150, y + 70);
  //side lines

  //left
  ctx.moveTo(150, y + 30);
  ctx.lineTo(120, y + 25);
  ctx.moveTo(150, y + 70);
  ctx.lineTo(120, y + 55);
  //right
  ctx.moveTo(150, y + 30);
  ctx.lineTo(180, y + 25);
  ctx.moveTo(150, y + 70);
  ctx.lineTo(180, y + 55);

  //box sides
  ctx.moveTo(120, y + 25);
  ctx.lineTo(120, y + 55);
  ctx.moveTo(180, y + 25);
  ctx.lineTo(180, y + 55);


  ctx.moveTo(120, y + 25);
  ctx.lineTo(150, y + 20);



  ctx.moveTo(180, y + 25);
  ctx.lineTo(150, y + 20);
  ctx.stroke();
  ctx.closePath();

};
window.requestAnimationFrame(load)

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas><br>
  <input type="range" id="v1" min="1" max="100" value="50">


</body>

</html>

【讨论】：

感谢您的所有帮助。 :)
4 分钟后我可以给你打勾。
不要推...，但我将如何使它在滑块更新时加载load()函数中的代码？
您需要将事件监听器添加到滑块的onChange。