Question

我需要帮助，我正在尝试按左箭头键删除一个字符，然后制作一个新字符。我虽然无法删除该字符。这是我的代码：

  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)

对不起，如果它看起来不贵，我就是从画布开始的。我已经尝试过clearRect，但是也删除了img。任何帮助，将不胜感激！（如果您要查看网站，则为https://project-experiment.glitch.me/。（您需要刷新2次才能查看图像，我不知道为什么。）

Answer 1

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

画布只是一个愚蠢的位图，没有图层或其他对象的概念。您无法删除角色来显示背后的背景，背景的那一部分已经消失了。如果您想再次看到它，则必须再次绘制它。

Answer 2

感谢您的所有帮助，但我找到了一种自行解决的方法。

因此，我将进行for循环，i = NANONAUT_HEIGHT，依此类推。然后我将clearRect（Ben的答案），然后再次绘制

再次感谢！如果有人需要代码段，那么就可以了。

          if(NANONAUT_WIDTH <= canvas.height - 270){
      NANONAUT_WIDTH = NANONAUT_WIDTH - 30
      
      for(i = NANONAUT_HEIGHT; i < img.width; i++){
    c.clearRect(0, 0, canvas.width, canvas.height)
          c.drawImage(spaceImg, 10,10);
      c.drawImage(nanonaut, NANONAUT_HEIGHT, NANONAUT_WIDTH)
      }
    }

我需要帮助从画布中删除图像

2 个答案: