HTML画布在水平平移移动时留下轨迹

我试图了解HTML画布是如何工作的。我知道基本知识,我正在编写一个二维游戏,但我有很多关于它和它的怪异行为的问题。我有不同版本的代码,每一个给我不同的结果时,移动到画布上的右边或左边的字符。

主要的问题是 translate() 因为画布是在人物移动到右边时调用的,它开始留下精灵的踪迹。我试着用 clearRect() 但如果我用 clearRect 然后它给了我白色的空背景 转换() 向右移动时起作用。为什么在中心移动时没有字符的轨迹,但一旦我向右移动到中心以外,就会出现精灵字符或精灵平铺集?

我真的需要帮助,所以如果问题太宽或不够清楚,让我知道,我填补它。

向我解释画布上发生了什么,以及如何修复它,以便 转换() 发生在角色移动到侧面,没有白色背景或精灵轨迹发生,只是一个很好的渲染,因为它是加载。

https://codepen.io/Limpuls/pen/deEGXX 在角色移动时为平铺集留下轨迹。您可以看到,当translate()for canvas发生时,它开始发生。如果我试着 透明矩形 在绘制之前,在我的渲染绘制循环中,然后在角色移动时,背景被切掉,只有一个白色背景。为什么以及如何解决这个问题?内部 render() 函数尝试注释和取消注释 清除矩形() 看看我在说什么。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var view = {x: 0, y: 0};
var questionsArray = [];
var moveCount = 0;
var moveCharacter = false;
var theArray = [];
/*var mapArray = [
  [0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 2, 2, 0],
  [0, 0, 1, 1, 1, 0, 0, 2, 0, 0],
  [0, 0, 1, 1, 1, 0, 0, 0, 0, 0],
  [0, 0, 0, 1, 1, 1, 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, 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, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 2, 2, 0],
  [0, 0, 1, 1, 1, 0, 0, 2, 0, 0],
  [0, 0, 1, 1, 1, 0, 0, 0, 0, 0],
  [0, 0, 0, 1, 1, 0, 0, 0, 0, 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 isPositionWall(ptX, ptY) {
  var gridX = Math.floor(ptX / 36);
  var gridY = Math.floor(ptY / 36);
  /*if(gridX > 0 || gridX >= mapArray[0].length)*/
  if(mapArray[gridX][gridY] === 1) {
    return true;
  /*if(gridY < 0 || gridY >= mapArray.length)
    return true;
    return mapArray[gridX][gridY];*/
  }
}


var Question = function(question, answer1, answer2, correctAnswer) {
  this.question = question;
  this.answer1 = answer1;
  this.answer2 = answer2;
  this.correctAnswer = correctAnswer;

  this.addToArray = function(){
     theArray.push(this);
 };
  this.addToArray();
}

Question.prototype.checkAnswer = function(answer1, answer2) {
  if (answer1.innerHTML  == this.correctAnswer) {
    console.log("correct");
    moveCharacter = true;
  } else {
    console.log("nope")
  }
}

var question1 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question2 = new Question("Jo ar ne?", "Ne", "Jo", "Ne");
var question3 = new Question("Aha ar ne?", "Aha", "Ne", "Aha");
var question4 = new Question("Ja ar ne?", "Taip", "Ne", "Taip");
var question5 = new Question("Jojo ar ne?", "Jojo", "Ne", "Jojo");
var question6 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");

var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question7 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var StyleSheet = function(image, width, height, x, y) {
  this.image = image;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y
  this.draw = function(image, sx, sy, swidth, sheight, x, y, width, height) {
    context.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);
  };
  this.drawimage = function(image, x, y, width, height) {
    context.drawImage(image, x, y, width, height);
  };
};

/* Initial Sprite Position */


var boatPosX = canvas.height/2 - 50;
var boatPosY = canvas.height/2 - 50;

function render(viewport) {

  context.save();
  context.translate(view.x, view.y);
  context.clearRect(0, 0, canvas.width, canvas.height)
  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);
  /*var lineHeight = 16 * 2.286;
  var textWidth = context.measureText(theArray[moveCount].question).width * 3;
  context.textAlign = 'left';
  context.textBaseline = 'top';
  context.font="14px Verdana";
  context.fillStyle = 'rgba(0, 0, 0 ,0.9)';
  context.fillRect(boatPosX + ship.width / 2, boatPosY - ship.height / 2, textWidth, lineHeight);
  context.fillStyle = 'white';
  context.fillText(theArray[moveCount].question, boatPosX + ship.width / 2, boatPosY - ship.height / 2);

  answerBtn1.innerHTML = theArray[moveCount].answer1;
  answerBtn2.innerHTML = theArray[moveCount].answer2;*/
  if(isPositionWall(boatPosX + 36, boatPosY)) {
    //boatPosX = oldPosY;
    //console.log("collision");
  }
  //console.log(mapArray[Math.floor(boatPosX / 36)]);
  //console.log(mapArray[Math.floor(boatPosX / 36)][Math.floor(boatPosX / 36)]);
  context.restore();

};


var btn1 = document.getElementsByClassName("button1")[0];
var btn2 = document.getElementsByClassName("button2")[0];
var btn3 = document.getElementsByClassName("button3")[0];
var btn4 = document.getElementsByClassName("button4")[0];
var answerBtn1 = document.getElementsByClassName("answer1")[0];
var answerBtn2 = document.getElementsByClassName("answer2")[0];

console.log(theArray);

answerBtn1.addEventListener("click", function(e) {
  theArray[moveCount].checkAnswer(answerBtn1, answerBtn2);
});

answerBtn2.addEventListener("click", function(e) {
  question1.checkAnswer(answerBtn2, answerBtn2);
});

btn1.addEventListener("click", function(e) {
  if (moveCharacter == true) {
    moveCount++;
    boatPosX -= 5;
    view.x += 5
    moveCharacter = false;
  }
});
btn2.addEventListener("click", function(e) {
  boatPosX += 5;
  view.x -= 5
  moveCount++;
});
btn3.addEventListener("click", function(e) {
  boatPosY += 5;
  view.Y += 5
  moveCount++;
});
btn4.addEventListener("click", function(e) {
  boatPosY -= 5;
  view.Y += 5
  moveCount++;
});


function move(e) {
  if (e.keyCode == 39) {
    boatPosX += 5;
    //canvas.width += 2;
    view.x -= 5
    moveCount++;
    console.log(moveCount);
    console.log("right");
  }
  if (e.keyCode == 37) {
    boatPosX -= 5;
    view.x += 5
    moveCount++;
    console.log(moveCount);
    console.log("left");
  }
  if (e.keyCode == 38) {
    boatPosY -= 5;
    view.Y += 5
    moveCount++;
    console.log(moveCount);
    console.log("up");
  }
  if (e.keyCode == 40) {
    boatPosY += 5;
    view.Y += 5
    moveCount++;
    console.log(moveCount);
    console.log("down");
  }
}

document.onkeydown = move;

var background = new Image();
background.src = "ground.png";
var sprite = new StyleSheet(background, 36, 36, 16, 16);

var boat = new Image();
boat.src = "ship.png";
var ship = new StyleSheet(boat, 36, 36, 16, 16);

console.log(mapArray[Math.floor(boatPosX / 36)]);
//console.log(mapArray[Math.floor(boatPosX / 36)][Math.floor(boatPosX / 36)]);
render();