Javascript - HTML5入力範囲スライダ - アニメーションの速度

HTML 5スライダを動作させようとしています。変数moveXの値を変更するようにしようとしています。 52行目は動作しますが、それは静的なものです。 53行目と54行目は私が試みたものですが、それは不規則な動きを作り出します。誰かが私を助けることができますか？Javascript - HTML5入力範囲スライダ - アニメーションの速度

ここのページへのリンクです：私は、この行には問題がある見るものからhttp://hyque.com/ani/drawImageBtnFwd.html

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

出典

2016-12-26 Andy Gagner

： moveX + = scaleSlider.valueは、

scaleSlider.valueは文字列を返します。 moveXも文字列です。

上記の行が「0」+ =「1」このようなあなたが持っている何か

呼び出されたときに、この結果は「01」であること、「01」の後に+ =「2」「012にもたらされます"など。

他に解決する前に、必ずparseInt（moveX、10）;を使用してください。

これにより、続行できます。

出典

2016-12-26 23:09:33 Saar

OK、ありがとうございます。私はそれを試してやっていきます。しかし、私はmoveXに番号を宣言したので、使用しているため問題は、scaleSliderでなければなりません「moveX = + 5;」私がスライダーを追加するときだけです。 –

それが働いて：あなたは、両方の –

それはで働いていました –

Javascript - HTML5入力範囲スライダ - アニメーションの速度

答えて

関連する問題