javascript - HTML5/Javascript - 为什么我的动画在第一次开始时会跳跃

Question

基本上我所做的是制作一个简单的动画，在按住 Enter 键的同时沿 x 轴移动一个矩形。这工作正常，但问题是，当您按下 Enter 键时，矩形似乎向前跳了大约 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 始终在运行(这很好)。每次调用时，您的刻度都会递增。如果您等待很长时间才按 Enter 键，您会发现它从右侧开始。

我的建议是将 tick++ 移至 if(key == true) 部分。