带滑块的控制变量

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

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
\t 
 
var slider = document.getElementById("slider"); 
 
var length = 450 
 

 
context.beginPath(); 
 
context.moveTo(100, 100); 
 
context.lineTo(length, 100); 
 
context.stroke(); 
 
\t 
 
\t 
 
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>

来源

2016-08-25 Cyprian

请什么或不工作的详细说明。 –

我觉得你并不需要的时间间隔，你应该只重画线的事件处理函数内（清理后）;也许使用'输入'事件会更好。

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/

来源

2016-08-25 08:29:14 fedeghe

你必须重绘整个行，如果你想它的长度变化。下面是它如何工作的一个例子：

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
\t 
 
var slider = document.getElementById("slider"); 
 
var length = 450 
 

 
context.beginPath(); 
 
context.moveTo(100, 100); 
 
context.lineTo(length, 100); 
 
context.stroke(); 
 
\t  
 
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>

来源

2016-08-25 08:30:26

在变化事件，调用一个函数，并传递长度值，以清除画布，然后重新绘制线

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>

来源

2016-08-25 08:32:39

带滑块的控制变量

回答

相关问题