时间戳

首页 > 解决方案 > 我需要帮助从画布中删除图像

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

问题描述

我需要帮助，当您按左箭头键然后创建一个新字符时，我正在尝试删除一个字符。不过，我无法删除这个角色。这是我的代码：

  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 次才能看到图像，我不知道为什么。））

标签： javascriptcanvas

解决方案

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

画布只是一个没有图层或不同对象概念的哑位图。你不能移除你的角色来揭示背后的背景，那部分背景已经消失了。如果你想再次看到它，你必须再次绘制它。

推荐阅读