带有滑块的控制变量

Control variable with slider

本文关键字：控制变量      更新时间：2023-09-26

我想用范围滑块控制可变长度，这样滑块就可以增加或减少行长度。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
	  
var slider = document.getElementById("slider");
var length = 450
context.beginPath();
context.moveTo(100, 100);
context.lineTo(length, 100);
context.stroke();
	  
	  
slider.addEventListener("change", function() { 
   length = slider.value;  
})
setInterval(function() {
  length = slider.value;
 
}, 100)
<!DOCTYPE HTML>
<html>
  <head>    
  </head>
  <body>
  <input id="slider" type="range" min="1" max="578" step="1" value="50" > 
    <canvas id="myCanvas" width="578" height="200"></canvas>
    
  </body>
</html>

如果你想改变它的长度，你必须重新绘制整条线。下面是它如何工作的一个例子:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
	  
var slider = document.getElementById("slider");
var length = 450
context.beginPath();
context.moveTo(100, 100);
context.lineTo(length, 100);
context.stroke();
	    
slider.addEventListener("change", function() { 
   length = slider.value;  
   context.clearRect(0, 0, canvas.width, canvas.height); // Clears the entire canvas
   context.beginPath(); // Draw the line with the new length
   context.moveTo(100, 100);
   context.lineTo(length, 100);
   context.stroke();
})
// You didn't need setIntertval.
<!DOCTYPE HTML>
<html>
  <head>    
  </head>
  <body>
  <input id="slider" type="range" min="1" max="578" step="1" value="50" > 
    <canvas id="myCanvas" width="578" height="200"></canvas>
  </body>
</html>

我认为你不需要Interval，你应该在事件处理函数内重新绘制线(清理后);也许使用'input'事件会更好。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var slider = document.getElementById("slider");
var length = 450
context.beginPath();
context.moveTo(100, 100);
context.lineTo(length, 100);
context.stroke();

slider.addEventListener("input", function() { 
    length = slider.value; 
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.moveTo(100, 100);
    context.lineTo(length, 100);
    context.stroke();
})
https://jsfiddle.net/g0ay525v/

在更改事件时，调用函数并传递length值以清除画布，然后重新绘制

var canvas = document.getElementById('myCanvas'),
  context = canvas.getContext('2d'),
  slider = document.getElementById("slider"),
  length = 450;
// you may add this line to sync the slider with the line before change event happens
slider.value = length; 
reDraw(length);
slider.addEventListener("change", function() {
  length = slider.value;
  reDraw(length);
});
function reDraw(length) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.moveTo(100, 100);
  context.lineTo(length, 100);
  context.stroke();
}
<input id="slider" type="range" min="1" max="578" step="1" value="50">
<canvas id="myCanvas" width="578" height="200"></canvas>

您还可以收听 mousemove 事件而不是change，因此您将在拖动滑块时立即更新线的长度，不像在change事件的情况下，更新线的长度只发生后您释放鼠标按钮。

var canvas = document.getElementById('myCanvas'),
  context = canvas.getContext('2d'),
  slider = document.getElementById("slider"),
  length = 450;
// you may add this line to sync the slider with the line before change event happens
slider.value = length;
reDraw(length);
slider.addEventListener("mousemove", function() {
  length = slider.value;
  reDraw(length);
});
function reDraw(length) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.moveTo(100, 100);
  context.lineTo(length, 100);
  context.stroke();
}
<input id="slider" type="range" min="1" max="578" step="1" value="50">
<canvas id="myCanvas" width="578" height="200"></canvas>

相关文章：