Canvas 带滑块的幻灯片

Question

我想用速度控制器创建 canvas 幻灯片。但是滑块不工作。它不控制幻灯片的速度。我可以从 setinterval 值手动更改值，但我想控制何时移动滑块，但它不起作用。除此之外，一切正常。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> Slider </h1>
<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #d3d3d3;">
</canvas>
   
<div class="slideshow-container">
<div style="text-align:left">  
    <input id="speed" name="speed" type="range" min="1" max="5" value="3">
    <p style="color: black">Value: <span id="speedValue"></span></p>  </div>
       
   <script>     
         
            var slider = document.getElementById("speed");
            var output = document.getElementById("speedValue");
            var speedMod= 3;
            output.innerHTML = slider.value;
            
            slider.oninput = function() {
            output.innerHTML = this.value;
            speedMod = this.value; 
            }
                        
var image0 = new Image();
image0.src = "http://placekitten.com/200/300";
var image1 = new Image();
image1.src = "http://placekitten.com/205/305";
var image2 = new Image();
image2.src = "http://placekitten.com/300/400";
var image3 = new Image();
image3.src = "http://placekitten.com/800/600";

images = new Array(image0, image1, image2, image3);

var counter = 0, ctx;

function draw(){
    myCanvas = document.getElementById("myCanvas");
    ctx = myCanvas.getContext("2d");         
               
}


function draw_next_image(){
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
    ctx.drawImage(images[counter], 0, 0);
    counter++;
   if (counter==images.length) {counter=0;}
    ;
     
}
setInterval(draw_next_image, speedMod*1000);
window.onload = draw;

</script>

Answer 1

这段代码有两个主要问题：

移动滑块时未设置新间隔
速度设置相反，5 表示间隔 5 秒，1 表示间隔 1 秒。

对于第一个问题，我们需要通过调用 setInterval 来重置间隔，但请注意，如果您这样做，每次移动滑块时都会设置一个新的间隔计时器，但旧计时器仍会运行ning，所以你会得到一些奇怪的时间效应（最终甚至运行进入存储问题）。

设置时间间隔时，您必须清除之前的所有设置。

因为速度是错误的，这个片段简单地从 6 中减去滑块值，当值为 5 时给出 1 秒，当值为 1 时给出 5 秒。如果你想尝试不同的范围，请输入一些更复杂的代码，可以从任何范围计算所需的间隔。

            var slider = document.getElementById("speed");
            var output = document.getElementById("speedValue");
            var speedMod= 3;
            let interval; //will be set by setInterval
            
            output.innerHTML = slider.value;
            
            slider.oninput = function() {
            output.innerHTML = this.value;
            speedMod = this.value;
            clearInterval(interval);
            interval = setInterval(draw_next_image, (6-speedMod)*1000);            
            }
                        
var image0 = new Image();
image0.src = "http://placekitten.com/200/300";
var image1 = new Image();
image1.src = "http://placekitten.com/205/305";
var image2 = new Image();
image2.src = "http://placekitten.com/300/400";
var image3 = new Image();
image3.src = "http://placekitten.com/800/600";

images = new Array(image0, image1, image2, image3);

var counter = 0; var ctx;
function draw(){
    myCanvas = document.getElementById("myCanvas");
    ctx = myCanvas.getContext("2d");         
               
}
function draw_next_image(){
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
    ctx.drawImage(images[counter], 0, 0);
    counter++;
   if (counter==images.length) {counter=0;}
    ;
     
}
clearInterval(interval);
interval = setInterval(draw_next_image, (6-speedMod)*1000);
window.onload = draw;

<h1> Slider </h1>
<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #d3d3d3;">
</canvas>
   
<div class="slideshow-container">
<div style="text-align:left">  
    <input id="speed" name="speed" type="range" min="1" max="5" value="3">
    <p style="color: black">Value: <span id="speedValue"></span></p>  </div>

顺便说一下，在加载图像之前绘制 canvas 之前在看到图像之前有一个暂停（在这种情况下 window.onload 没有做任何事情）。

Canvas 带滑块的幻灯片

Canvas Slideshow with slider

html

javascript

css

canvas