如何实时影响滑块？

Question

基本上，我想在顶部有一个滑块，可以实时影响画布（例如圆的半径）中的某些值。

这就是我到目前为止的目标，它确实可以完成我想要的，除了我希望它移动滑块而不是必须按钮时改变。

<input type="range" id="MySldr" value="15" min="1" max="100">

<button class="Btn">Draw</button>

<canvas class="result"></canvas>

<script>

    let Btn = document.querySelector(".Btn");

    Btn.addEventListener("click", () => {

        let res = document.querySelector(".result");
        var ctx = res.getContext("2d");
                    
        let SldrVal = document.getElementById("MySldr").value;

        ctx.clearRect(0, 0, 1000, 1000);
        ctx.beginPath();
        ctx.arc(125, 125, SldrVal, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.font = "30px Arial";
        ctx.fillText(SldrVal, 10, 50);
    });

</script>

jsfiddle

我是JS的新手，非常简单，非常简单答案会很好，但是任何事情都值得赞赏。

Answer 1

这不是事件，而是演示了一个称为“游戏循环”的事情。非常适合动画移动的事物。 requestAnimationFrame就像下一个动画框架的settimeout（这样它将平滑）。每秒大约60次。

let canvas = document.querySelector(".result");
var ctx = canvas.getContext("2d");

function drawRect() {
  let SldrVal = document.getElementById("MySldr").value;
  //ctx.strokeStyle = "#305ef2";
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, SldrVal, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.font = "30px Arial";
  ctx.fillText(SldrVal, 10, 50);

  requestAnimationFrame(drawRect)
}

drawRect()

<input type="range" id="MySldr" value="15" min="1" max="100">
<br>
<canvas class="result" width="400" height="200"></canvas>

Answer 2

您可以在输入范围元素上收听更改事件。

document.getElementById("MySldr").addEventListener('change', (event) => {
    let value = event.target.value; // value of the range slider
    // your code here
})

Answer 3

除非您需要/需要您的程序不断重新绘制，否则您不需要requestAnimationFrame（）。我也看不到每个帧刷新元素的重点。您可以在eventlistener上使用输入进行实时输入。

let mySldr = document.getElementById("MySldr");
let res = document.querySelector(".result");
let ctx = res.getContext("2d");

mySldr.addEventListener("input", () => {
  val = mySldr.value
  ctx.clearRect(0, 0, 1000, 1000);
  ctx.beginPath();
  ctx.arc(125, 125, val, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.font = "30px Arial";
  ctx.fillText(val, 10, 50);
});

<input type="range" id="MySldr" value="15" min="1" max="100">
<canvas class="result"></canvas>