为什么移动图像时我的对象（矩形）会闪烁？

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

您的图片闪烁，因为您正在清除keydown事件处理程序中的大矩形，其中部分内容覆盖了底部区域。在重绘整个电路板的功能排队之前，有一个最多20毫秒的延迟。

一个简单但又脏的修复方法是调整keydown处理程序中清除的区域，使其仅覆盖图像区域：

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

但是，更好的解决方案是避免在任何事件处理程序中对画布进行任何更改;也就是说，从事件处理程序中删除clearRect和drawImage调用。为了确保画布尽快刷新更新状态，您可以使用requestAnimationFrame代替setInterval来调用tekenenObjecten函数：

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

requestAnimationFrame(tekenenObjecten);