Question

当我在画布上向左或向右移动时，我开始获得这些轨迹效果。我需要它才能很好地渲染，因为它位于画布的中心。我使用translate（）函数将背景移到一边。我也尝试过clearRect但是当我向右移动时我才得到白色背景。如何解决这个问题？

var view = {x: 0, y: 0};

var mapArray = [
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
  [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0],
  [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

function render(viewport) {

  context.save();
  context.translate(view.x, view.y);



  requestAnimationFrame(render);
  var oldPosX = boatPosX;
  var oldPosY = boatPosY;


  for (let i = 0; i < mapArray.length; i++) {
    for (let j = 0; j < mapArray[i].length; j++) {

      if (mapArray[j][i] == 0) {
        this.sprite.draw(
          background,
          190,
          230,
          26,
          26,
          i * this.sprite.width,
          j * this.sprite.height,
          this.sprite.width,
          this.sprite.height
        );
      }
      if (mapArray[j][i] == 1) {
        this.sprite.draw(
          background,
          30,
          30,
          26,
          26,
          i * this.sprite.width,
          j * this.sprite.height,
          this.sprite.width,
          this.sprite.height
        );

      }
      if (mapArray[j][i] == 2) {
        this.sprite.draw(
          background,
          200,
          20,
          26,
          26,
          i * this.sprite.width,
          j * this.sprite.height,
          this.sprite.width,
          this.sprite.height
        );
      }
    }
  }
  this.ship.drawimage(boat, boatPosX, boatPosY, 50, 50);


  if(isPositionWall(boatPosX + 36, boatPosY)) {
    boatPosX = oldPosY;
    console.log("collision");
  }

  context.restore();

};

function move(e) {
  if (e.keyCode == 39) {
    boatPosX += 5;
    view.x -= 5
    moveCount++;
    console.log(moveCount);
    console.log("right");
  }

Answer 1

您不重绘的任何像素都将保持不变。所以当你移动你的船时，但不要在船的最后一帧的像素上画任何东西，那些像素将继续显示该船的像素。

您需要重绘这些像素。使用fillRect并将fillStyle设置为蓝色背景颜色，或者每帧绘制一个完整尺寸的背景图像。

ctx.fillStyle = "#60A0D8";
ctx.fillRect(0, 0, view.x, view.y);

在绘制任何其他内容之前执行此操作。

Answer 2

有两种选择，要么删除上一张图像，要么使用context2d.clearRect

清除整个画布

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

当我在html画布上向右或向左滚动时，我会得到图像轨迹，为什么？

2 个答案: