如何使用按键避免图像闪烁

How to avoid flickering images with keypress?

本文关键字：图像 闪烁 何使用      更新时间：2023-09-26

我有一段代码，用户必须按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;
  }
});
相关文章：