HTML5/Javascript - 爲什麼我的動畫首次啓動時跳起

Question

基本上我所做的是製作一個簡單的動畫，在按住回車鍵的同時將矩形移動到x軸。這工作正常，但問題是，當你按下回車鍵的矩形似乎跳轉向前約10px左右。不知道是什麼原因造成的。

//event listener 
window.addEventListener("keydown", onKeyDown, false); 
window.addEventListener("keyup", onKeyUp, false); 

function onKeyDown(event){ 
    var keyCode = event.keyCode; 
    switch(keyCode){ 
     case 13: //enter 
     key = true; 
     break; 
    } 
} 

function onKeyUp(event){ 
    var keyCode = event.keyCode; 
    switch(keyCode){ 
     case 13: //enter 
     key = false; 
     break; 
    } 
} 

//neccessary variables 
var tick = 0; 
var key = false; 

//main animation function 
function drawStuff(){ 
window.requestAnimationFrame(drawStuff); 
var canvas = document.getElementById("myCanvas"); 
var c = canvas.getContext("2d"); 

if(key == true){ 
    c.clearRect(0,0,500,500); 
    c.fillStyle = "blue"; 
    c.fillRect(tick,0,100,100); 
} 
else{ 

} 
tick++; 
} 
window.requestAnimationFrame(drawStuff); 

任何幫助表示讚賞！

Answer 1

這是因爲你的requestAnimationFrame總是在運行（這是很好的）。每次調用時，你的滴答滴答都會增加。如果您在輸入之前等待很長時間，您會注意到它開始向右多了。

我的建議是將tick++轉換爲if(key == true)部分。