Question

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

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 1

我认为你不需要Interval，你应该在事件处理函数中重绘行（清理后）;也许使用'输入'事件会更好。

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/

Answer 2

如果要更改长度，则必须重绘整行。以下是它如何工作的示例：

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>

Answer 3

在更改事件时，调用一个函数并传递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>

带滑块的控制变量

3 个答案: