Как избежать мерцания изображений при нажатии клавиши?

Question

У меня есть фрагмент кода, где пользователь должен нажать 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?

Answer 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; 
    } 
});