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

HTML5/Javascript - Why does my animation jump when it first starts

本文关键字：第一次 开始时 跳跃 动画 我的 Javascript 为什么 HTML5      更新时间：2023-09-26

基本上，我所做的就是制作一个简单的动画，当按下输入键时，矩形沿着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);

任何帮助都是感激的!

这是因为你的requestAnimationFrame总是在运行(这是好的)。你的tick每次被调用时都会被递增。如果你等了很长时间才按回车键，你会发现它从更靠右的地方开始。

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

相关文章：