JS 范围滑块不适用于 JS canvas

Question

我有这个用简单的 JS canvas 线绘制的 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>

Answer 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>

JS 范围滑块不适用于 JS canvas

JS ranged slider not working with JS canvas

html

javascript

html5-canvas