Cannot partially clear the canvas

问题

I want to partially clear the canvas.

in this project, I cannot clear the canvas fully ,I have to clear the canvas partially.I have tried to clear the canvas by its original x and y(the position before the movement),but it does not work.

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");


var enemys = [];

let enemyLimitObj = {
  enemyLimitDown: 470,
  enemyLimitLeft: 30,
  enemyLimitRight: 670,
  enemyLimitTop: 30
};

class Enemy {
  constructor(x) {
    (this.x = x),
    (this.y = 30),
    (this.originalX = x),
    (this.originalY = 30),
    (this.width = 50),
    (this.height = 50),
    (this.xstep = 2),
    (this.ystep = 50),
    (this.direction = "right"),
    enemys.push(this);
  }

  draw(enemys) {
    for (let i = 0; i < num; i++) {
      context.drawImage(
        imageEnemy,
        enemys[i].x,
        enemys[i].y,
        enemys[i].width,
        enemys[i].height
      );
    }
  }

  clear(enemys) {

    //   context.clearRect(0, 0, canvas.width, canvas.height - 130);    this works perfectly,but I want to partially clear the canvas

    for (let i = 0; i < num; i++) {
      context.clearRect(
        enemys[i].originalX,
        enemys[i].originalY,
        enemys[i].width,
        enemys[i].height
      );
    }
  }

  update(enemys) {
    for (let i = num - 1; i >= 0; i--) {
      if (enemys[i].direction == "right") {
        let max = 0;
        max = findMax();
        if (max == enemyLimitObj.enemyLimitRight - enemys[i].width) {
          for (let j = num - 1; j >= 0; j--) {
            enemys[j].originalY = enemys[j].y;
            enemys[j].y += this.ystep;
            enemys[j].direction = "left";
          }
        } else {
          enemys[i].originalX = enemys[i].x;
          enemys[i].x += enemys[i].xstep;
        }
      } else {
        let min = findMin();
        if (min == enemyLimitObj.enemyLimitLeft) {
          for (let j = num - 1; j >= 0; j--) {
            enemys[j].originalY = enemys[j].y;
            enemys[j].y += enemys[j].ystep;
            enemys[j].direction = 'right';
          }
        } else {
          enemys[i].originalX = enemys[i].x;
          enemys[i].x -= enemys[i].xstep;
        }
      }
    }
  }

  animate(enemys) {
    this.update(enemys);
    this.clear(enemys);
    this.draw(enemys);

    let canRequest = requestAnimationFrame(() => {
      this.animate(enemys);
    });

    for (let i = 0; i < num; i++) {
      if (enemys[i].y + this.height >= enemyLimitObj.enemyLimitDown) {
        cancelAnimationFrame(canRequest);
      }
    }
  }
}

<canvas id="canvas" width="700" height="600"></canvas>

I expect I can partially clear the canvas and animate the image. Full code is here link;

回答1:

Demo of how to use layers in canvas ... you can clear individual canvas without clearing them all...

var c1 = document.getElementById("layer1");
var ctx1 = c1.getContext("2d");

var c2 = document.getElementById("layer2");
var ctx2 = c2.getContext("2d");

var c3 = document.getElementById("layer3");
var ctx3 = c3.getContext("2d");

ctx1.font = "12px Arial";
ctx1.fillStyle = "black";
ctx1.textAlign = "left";
ctx1.fillText("Hello World!", 30, 30);

ctx2.font = "12px Arial";
ctx2.fillStyle = "black";
ctx2.textAlign = "left";
ctx2.fillText("High There!", 30, 30);

ctx3.font = "12px Arial";
ctx3.fillStyle = "black";
ctx3.textAlign = "left";
ctx3.fillText("Sup!", 30, 30);

<canvas id="layer1" name="layer1" width="300" height="300" style="z-index:0;position:absolute;left:10px;top:10px;border:1px solid #000000;background-color:white";></canvas>

<canvas id="layer2" name="layer2" width="100" height="100" style="z-index:1;position:absolute;left:30px;top:70px;border:1px solid #000000;background-color:white;"></canvas>

<canvas id="layer3" name="layer3" width="100" height="100" style="z-index:3;position:absolute;left:180px;top:70px;border:1px solid #000000;background-color:white;"></canvas>

来源：https://stackoverflow.com/questions/57618281/cannot-partially-clear-the-canvas