即使在其上绘制了另一张图像，背景图像仍然保留

Question

如您在https://codepen.io/anon/pen/PvZzpe上看到的那样，该字符在按左右键时留下痕迹

我正在尝试使角色在屏幕上左右移动而不留下痕迹，但是它不起作用

我这样做是通过按以下方式呼叫clearBg()：https://codepen.io/anon/pen/dEGXjV

您能看到问题所在吗？

Answer 1

您遇到的问题是clearBg函数无法以同步方式工作。因此，当您单击箭头键时，它将首先绘制图像，然后清除背景。您可以使用以下回调函数来解决该问题。

function clearBg(callback){
  var bg = new Image();
  bg.src = 'https://i.imgur.com/jfBz9o6.png';
  bg.onload = function(){ 
    c.drawImage(bg,0,0,950,550);
    if(callback) callback();
  };
}

function doKeyDown(event){
  switch(event.keyCode){
    case 37:
      clearBg(function() {
        MrK1.goLeft();
        MrK1.draw();
      });
      break;
    case 39:
      clearBg(function() {
        MrK1.goRight();
        MrK1.draw();
      });
      break;
  }
}

如果您不熟悉回调，只需阅读this medium post。它会给你一些基本的想法。