如何避免按鍵閃爍的圖像？

-1

我有一段代碼，用戶必須按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時進行更改？

來源

2016-05-13 KevinN

是否有其他的代碼來操縱'mijnObject'？ – Sumurai8

@ Sumurai8是的，我嘗試製作一個比如BrickBreaker的遊戲，我的槳，球和磚都是用mijnObject製作的:)。這很容易呈現我的函數「geluidsKnoppen（）」，但我不知道按鍵是否可行？ – KevinN

在html5中使用canvas時，請記住，當您重繪框架時，將刪除畫布上的所有內容，然後繪製您希望在新框架中看到的所有內容。

在您的按鍵處理程序中，您只繪製一次圖像。在代碼的另一部分繪製新框架時，畫布將被清除，並且您不會重繪它。

你想要做的是可能有一個總是繪製的佔位符，然後只改變它的來源，讓主循環來照顧它。

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

來源

2016-05-13 14:35:31 Sumurai8

非常感謝，完美的作品:) – KevinN

如何避免按鍵閃爍的圖像？

回答

相關問題