滑块移动时获取滑块的价值? [英] Get value of slider while it's being moved?
本文介绍了滑块移动时获取滑块的价值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在学习一些基本的前端Web技术--Bootstrap,jQuery,HTML5 canvas - 我希望能够在滑块移动时更新我正在绘制的正弦曲线的尺寸,而不是在它发布时(目前如何运作)。
I'm messing around learning some basic front-end web technologies - Bootstrap, jQuery, HTML5 canvas - and I wanted to be able to update the dimensions of a sinusoid I'm drawing as the slider moves, not when it's released (how it currently works).
<input type="range" id="ampSlider" min="-200" max="200" step="5" onchange="refreshGraph()">
<input type="range" id="freqSlider" min="1" max="400" step="5" onchange="refreshGraph()">
<canvas id="graphCanvas" width="1000" height="600"></canvas>
<script>
drawShape();
drawGraph(200, 150);
$("#ampSlider").val(200);
$("#freqSlider").val(150);
function refreshGraph()
{
console.log($("#ampSlider").val());
drawGraph($("#ampSlider").val(), $("#freqSlider").val());
}
function drawGraph(amp, freq)
{
console.log("Drawing: " + amp + " | " + freq);
var canvas = document.getElementById('graphCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var y = canvas.height/2;
context.lineWidth = 10;
context.beginPath();
context.moveTo(0, y);
for(n = 0; n < canvas.width; n += 5)
{
context.lineTo(n, amp * Math.sin(Math.PI * n / freq) + y);
}
context.stroke();
}
</script>
推荐答案
使用 oninput
而不是 onchange
这篇关于滑块移动时获取滑块的价值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文