画像を移動するとオブジェクト（矩形）がちらつくのはなぜですか？

Question

私のオブジェクトを左から右に動かすと、私の四角形（ここで私は高得点と寿命を置くはずです）がちらつきますか？これをどうすれば解決できますか？私はfillTextを使用するときに同じ問題を抱えています。私はパドルで左または右に移動するたびにテキストがちらつきます。

var canvas = document.getElementById("mijnCanvas"); 
var mijnObject = canvas.getContext("2d"); 

var afbeelding = new Image(); 
var balkX = (canvas.width/2)-50; 
var balkY = canvas.height-100; 

function makenBalkKort() { 
    mijnObject.drawImage(afbeelding, balkX, balkY, afbeelding.width, afbeelding.height); 
} 
afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Kort.png"; 

function tekenenObjecten() { 
    mijnObject.clearRect(0, 0, canvas.width, canvas.height); 
    makenBalkKort(); 
    drawFrame(); 
} 
setInterval(tekenenObjecten, 20); 

window.addEventListener("keydown", function LinksOfRechts() { 
    mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height); 
    var balkNaarX = 15; 
    var code = event.which || event.keyCode; 
    if(code == 37) { 
     if(balkX > 0) { 
      balkX -= balkNaarX; 
     } 
    } 
    else if(code == 39) { 
     if(balkX < canvas.width-afbeelding.width) { 
      balkX += balkNaarX; 
     } 
    } 
    mijnObject.drawImage(afbeelding, balkX, balkY, afbeelding.width, afbeelding.height); 
}); 

function drawFrame() { 
     mijnObject.beginPath(); 
     mijnObject.fillStyle = "#000000"; 
     mijnObject.strokeStyle = "#000000"; 
     mijnObject.rect(0, 750, canvas.width, 50); 
     mijnObject.fill(); 
     mijnObject.stroke(); 
     mijnObject.closePath();  
} 

はここに私の画像です：

Answer 1

あなた​​イベントハンドラで大きな四角形をクリアしているので、あなたのイメージが点滅している、とこれの一部は底面積をカバーしています。その後、ボード全体を再描画する関数がキューに入れられるまでに、最大20ミリ秒の遅延があります。しかし、よりよい解決策は、に変更を加え避けるためだろう

mijnObject.clearRect(balkX, balkY, afbeelding.width, afbeelding.height); 

：

シンプルですが、汚い修正は画像領域のみをカバーする​​ハンドラでクリアされている面積を調整することであろう任意のイベントハンドラのキャンバス。つまり、clearRectとdrawImage呼び出しをイベントハンドラから削除します。私は実際に表示するためにJSFiddleまたは似たようなサイトでこれを置くことをお勧め

function tekenenObjecten() { 
    mijnObject.clearRect(0, 0, canvas.width, canvas.height); 
    makenBalkKort(); 
    drawFrame(); 
    requestAnimationFrame(tekenenObjecten); 
} 

requestAnimationFrame(tekenenObjecten);