Javascript 如何避免按键时图像闪烁？

我有一段代码，用户必须按0来静音，或按1来播放音乐片段的声音。如果声音是静音的，则在播放音乐时图像会发生变化，反之亦然

var audio = new Audio();

window.onload = function geluidMaken() {
    audio.src = "../Geluiden/Achtergrond_Geluid.mp3";
    audio.play();
    audio.loop = true;
    window.addEventListener("keypress", function geluidsKnoppen() {
        var codeGeluid = event.which || event.keyCode;
        if(codeGeluid == 48) {
            var geluidAanKnop = new Image();
            geluidAanKnop.src = "../Afbeeldingen/Sound_Button.png";
            mijnObject.drawImage(geluidAanKnop, (canvas.width/2)-25, 850, geluidAanKnop.width, geluidAanKnop.height);
            audio.muted = true;
        }
        else if(codeGeluid = 49) {
            var geluidAfKnop = new Image();
            geluidAfKnop.src = "../Afbeeldingen/Mute_Button.png";
            mijnObject.drawImage(geluidAfKnop, (canvas.width/2)-25, 850, geluidAfKnop.width, geluidAfKnop.height);
            audio.muted = false;
        }
    });
}

我还有一段代码，在这里我呈现了所有其他函数

function tekenenObjecten() {
    mijnObject.clearRect(0, 0, canvas.width, canvas.height);
    makenBalkKort();
    makenBal();
    makenMuur();
    makenBord();

---

图像在画布上不可见，但当我单击键0或1时，图像会出现并直接消失。如何确保图像保留在画布上，并在按下0或1时进行更改？

在html5中使用画布时，请记住，重画帧时，删除画布上的所有内容，然后在新帧中绘制希望看到的所有内容

在按键处理程序中，只需绘制一次图像。在代码的另一部分中绘制新帧时，画布将被清除，并且您永远不会重新绘制它

您要做的可能是有一个始终绘制的占位符，然后只更改它的源并让主循环处理它

var audioKnop = new Image();
var audioAanSource = "../Afbeeldingen/Sound_Button.png";
var audioMuteSource = "../Afbeeldingen/Mute_Button.png";

function init() {
  audioKnop.src = audioMuteSource;
}

function tekenenObjecten() {
  mijnObject.clearRect(0, 0, canvas.width, canvas.height);
  makenBalkKort();
  makenBal();
  makenMuur();
  makenBord();
  maakAudioButton();
}

function maakAudioButton() {
  mijnObject.drawImage(audioKnop, (canvas.width/2)-25, 850, audioKnop.width, audioKnop.height);
}

window.addEventListener("keypress", function () {
  var codeGeluid = event.which || event.keyCode;
  if(codeGeluid == 48) {
    audioKnop.src = audioAanSource;
    audio.muted = true;
  } else if(codeGeluid == 49) {
    audioKnop.src = audioMuteSource;
    audio.muted = false;
  }
});

---

有没有其他代码可以操纵mijnObject？@Sumurai8是的，我试着制作一个游戏，比如BrickBreaker，我的桨、球和砖块都是用mijnObject:）制作的。渲染我的函数“geluidsKnoppen（）”很容易，但我不知道用按键是否可行？