帶滑塊的控制變量

我想用範圍滑塊控制變量長度，以便滑塊可以增加或減少線的長度。帶滑塊的控制變量

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

帶滑塊的控制變量

回答

相關問題