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

HTML5 / Javascript - 为什么我的动画首次启动时会跳转

1 个答案: