javascript - 我需要帮助从 Canvas 中删除图像

Question

我需要帮助，我试图在您按向左箭头键时删除一个字符，然后创建一个新字符。但我无法删除这个 Angular 色。这是我的代码:

  var canvas = document.createElement('canvas');
    var c = canvas.getContext('2d');
  canvas.width = 1000;
  canvas.height = 600;
    document.body.appendChild(canvas);

  var NANONAUT_HEIGHT = 10;
  var NANONAUT_WIDTH = 240;

  window.addEventListener('keydown', onKeyDown);
//  window.addEventListener('keyup', onKeyUp);

  function onKeyDown(event) {
   if(event.keyCode === 39){ 
    if(NANONAUT_HEIGHT <= 240){
      NANONAUT_HEIGHT = NANONAUT_HEIGHT + 10

      for(i = NANONAUT_HEIGHT; i < img.width; i++){
    c.drawImage(nanonaut, NANONAUT_HEIGHT, NANONAUT_WIDTH)
      }
    }
   } 
     console.log(NANONAUT_WIDTH)
  }



  var nanonaut = new Image();
  nanonaut.src = "https://cdn.glitch.com/098e8cf0-b83e-44bc-8aa2-c8316900937f%2FNanonaut.png?1551809807699"
  var img = new Image();
  img.src = "https://cdn.glitch.com/098e8cf0-b83e-44bc-8aa2-c8316900937f%2Fimage.png?1551724673489"

  c.drawImage(img, 10,10);
  c.drawImage(nanonaut, NANONAUT_HEIGHT, NANONAUT_WIDTH)

抱歉，如果它看起来很菜鸟，我刚刚开始使用 Canvas 。我尝试过clearRect，但这也删除了img。任何帮助，将不胜感激! (网站是https://project-experiment.glitch.me/如果你想看的话。(你需要刷新2次才能看到图像，我不知道为什么。))

Answer 1

通常，您会执行 clearRect(0, 0, canvas.width, canvas.height) 并在每次更新时从头开始绘制所有内容。

Canvas 只是一个哑位图，没有图层或不同对象的概念。你无法移除你的 Angular 色来显示后面的背景，那部分背景已经消失了。如果你想再次看到它，你必须重新绘制它。