Javascript-HTML5输入范围滑块-动画速度_Javascript_Html_Html5 Canvas

Javascript-HTML5输入范围滑块-动画速度

javascript html html5-canvas

Javascript-HTML5输入范围滑块-动画速度,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我正在尝试让HTML5滑块工作。我试图让它改变变量moveX的值。第52行可以工作，但这是静态的。第53行和第54行是我尝试过的，但它只会产生不稳定的运动。谁能帮帮我吗以下是该页面的链接：带按钮的绘图图像开始暂停速度 window.onload=函数（）{ var c=document.getElementById（“myCanvas”）； var ctx=c.getContext（“2d”）； var img=新图像（）； img.src=”http://hyque.com/a

我正在尝试让HTML5滑块工作。我试图让它改变变量moveX的值。第52行可以工作，但这是静态的。第53行和第54行是我尝试过的，但它只会产生不稳定的运动。谁能帮帮我吗

以下是该页面的链接：


带按钮的绘图图像
开始
暂停


速度

window.onload=函数（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=新图像（）；
img.src=”http://hyque.com/ani/adam.png";  
var-xPos=0；
var-moveX=0；
var scaleSlider=document.getElementById（“slider1”）；
ctx.drawImage（img，0,0,120,182,0,0,120,182）；
//数量（刻度尺）；
var el=document.getElementById（'startBtn'）；
el.addEventListener（'click'，strt，false）；
var el2=document.getElementById（'stopBtn'）；
el2.addEventListener（'click'，stopIt，false）；
函数imageXPosition（）{
clearRect（0，0，1200，182）；//这将清除画布
drawImage（img，xPos，0，120，182，moveX，0，120，182）；//绘制各个帧
xPos+=120；//添加宽度
//moveX+=5；
moveX+=scaleSlider.value；
//scaleSlider.onchange=函数（e）{moveX=e.target.value；}
//这将向第二帧添加1
如果（xPos==120）{
xPos+=1；
} 
如果（xPos>841）{xPos=0；}//则在las帧之后重置为0
如果（moveX>=1200）{moveX=0；}
}
var intStp；//在strt（）函数外部声明，因为
函数strt（）{
clearInterval（intStp）；//如果没有此lin，每次单击“开始”按钮，动画都会加速
intStp=设置间隔（图像位置，200）；
}
函数stopIt（）{
净距（intStp）；
}   
}

据我所见，这一行有问题： moveX+=scaleSlider.value

值返回一个字符串。 moveX也是一个字符串

当上面这一行被调用时，你就有了这样的东西

“0”+=“1”此结果为“01” 在“01”+=“2”之后，结果是“012”等

在解决任何其他问题之前，请确保使用parseInt（moveX，10）

这将允许您继续。

好的，谢谢。我会努力解决的。但是我声明moveX是一个数字，所以问题一定是在scaleSlider中，因为使用“moveX=+5；”是有效的，只有当我添加滑块时才有效。它与：moveX+=parseInt（scaleSlider.value）一起工作。这是我的意图，您解析这两个，非常感谢

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DrawImage with Buttons</title>
</head>

<body>

<button id="startBtn">Start</button>
<button id="stopBtn">Pause</button><br />
<p>
<strong>Speed</strong>
<input id="slider1" type="range" min="1" max="10" value="0" step="1">

</p>

<canvas id="myCanvas" width="1200" height="187" style="border:1px solid #d3d3d3;">

<script>


window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://hyque.com/ani/adam.png";  
var xPos = 0;
var moveX = 0;
var scaleSlider = document.getElementById("slider1");

ctx.drawImage(img, 0, 0, 120, 182, 0, 0, 120, 182);


//number(scaleSlider);
var el = document.getElementById('startBtn');
el.addEventListener('click', strt, false);

var el2 = document.getElementById('stopBtn');
el2.addEventListener('click', stopIt, false);

function imageXPosition() {


ctx.clearRect(0, 0, 1200, 182);  // This clears the canvas

ctx.drawImage(img, xPos, 0, 120, 182, moveX, 0, 120, 182); //Draws the    individual frames


xPos += 120; //adds the width

//moveX += 5;
moveX += scaleSlider.value;
//scaleSlider.onchange = function(e){moveX = e.target.value;}


//This adds 1 to the second frame
if(xPos == 120){
    xPos += 1;
} 
if(xPos > 841){xPos = 0;}   // This resets to 0 after the las frame
if(moveX >= 1200){moveX = 0;}

}
 var intStp; // declared outside the strt() function, because 

function strt(){
clearInterval(intStp); //without this lin the animation will speed up   eachtime you click "Start Button"
intStp = setInterval(imageXPosition, 200);

}
function stopIt(){
    clearInterval(intStp);
}   
 }

</script>
</body>
</html>