Saya memiliki kubus 3D yang saya gambar dengan garis kanvas JS sederhana. Masalah saya adalah ketika saya mencoba mengubah salah satu variabel sehingga dapat diubah secara manual dengan slider, garis dengan variabel di dalamnya tidak akan dimuat. Saya pikir ini ada hubungannya dengan penggeser, karena jika saya hanya menetapkan variabel angka seperti 50, maka semuanya dimuat dengan baik. Saya akan melampirkan kode yang rusak dengan slider, dan kemudian kode yang berfungsi, tanpa slider. Saya harap seseorang dapat membantu. Terima kasih!

Kode rusak dengan slider:

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>

Saya tidak tahu mengapa kodenya tidak berfungsi. Saya tidak memiliki akses ke pemeriksa sintaks sekarang, jadi saya mungkin mengalami kesalahan, tetapi saya tidak mengerti mengapa itu tidak berfungsi.

Berikut adalah kode kerja tanpa penggeser jarak jauh.

Kode bagus, tetapi tanpa penggeser:

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>
0
JSman225 13 Mei 2021, 00:43

1 menjawab

Jawaban Terbaik

Nilai penggeser rentang akan menjadi string sehingga Anda harus menguraikannya menjadi angka melalui parseInt agar kode Anda berfungsi.

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>
1
Dominik 12 Mei 2021, 21:55