为什么fillText没有显示在画布上？

Question

尝试将fillStyle颜色更改为许多不同的颜色，也更改了不同的位置，但一无所获。 控制台中也没有错误。 我已经在画布上绘制了图块和精灵，这和它有关系吗？ 我只需要在每次按键时打印出简单的文本即可。

这是代码：

function move(e) {
  if (e.keyCode == 39) {
    boatPosX += 5;
    view.x -= 5
    moveCount++;
    context.fillStyle = "red";
    context.fillText(theArray[0].question, 0, 0);
    console.log(theArray[0].question);
  }

其余代码：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var view = {x: 0, y: 0};
var questionsArray = [];
var moveCount = 0;
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],
  [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]
];

function isPositionWall(ptX, ptY) {
  var gridX = Math.floor(ptX / 36)
  var gridY = Math.floor(ptY / 36)
  if(gridX < 0 || gridX >= mapArray[0].length)
    return true;
  if(gridY < 0 || gridY >= mapArray.length)
    return true;
    return mapArray[gridX][gridY];
}
var theArray = [];
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() {
  return answer1 || answer2 == correctAnswer;
}

var question1 = new Question("Taip ar ne?", "Taip", "Ne", "Taip");
var question2 = new Question("Jo ar ne?", "Ne", "Jo", "Jo");
var question3 = new Question("Aha ar ne?", "Aha", "Ne", "Ne");
var question4 = new Question("Ja ar ne?", "Taip", "Ne", "Taip");
var question5 = new Question("Jojo ar ne?", "Taip", "Ne", "Taip");
var question6 = 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);
  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[i][j] == 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[i][j] == 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[i][j] == 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);
  //console.log(boatPosX + ship.width)
  if(isPositionWall(boatPosX, boatPosY)) {
    boatPosX = oldPosY;
    console.log("collision");
  }

  context.restore();

};

function move(e) {
  if (e.keyCode == 39) {
    boatPosX += 5;
    //canvas.width += 2;
    view.x -= 5
    moveCount++;
    console.log(moveCount);
    console.log("right");
    context.fillStyle = "red";
    context.fillText(theArray[0].question, 0, 0);
    console.log(theArray[0].question);
  }
  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, 90, 100, 16, 16);
console.log(Math.floor(boatPosX / 36));
console.log(mapArray[Math.floor(boatPosX / 36)]);


render();

Answer 1

似乎是因为您试图将文本设置为0,0。 默认情况下，文本将绘制在Y位置0上方（因此离开画布顶部，这就是为什么您什么都看不到的原因）。 如果将其设为0,10或0,20，则可能会看到一些文字。

可以像这样更改文本基准行，因此在0,0处您将看到一些内容。

context.textBaseline = "top";