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)部分。