1

基本的に私がやったことは、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);

どんな助けでも大歓迎です！

4

1 に答える 1

1

これは、 requestAnimationFrame が常に実行されているためです (これは良いことです)。あなたの目盛りは、呼び出されるたびにインクリメントされています。エンターを押す前に長い間待つと、エンターがずっと右側から始まることに気付くでしょう。

私の提案は、tick++をそのif(key == true)部分に移動することです。

于 2013-01-17T20:28:36.840 に答える