Question

我正在开发游戏。但是，我似乎无法像以前那样获得画布的上下文。我的HTML文件包含代码：

<html>
<head>
  <meta charset="utf-8">
  <title>Nostalgia</title>
  <link rel="stylesheet" href="gameStyles.css"></link>
</head>
<body>
  <canavs id="gameCanvas"></canvas>
</body>
<script src="gameScript.js"></script>
</html>

javascript文件是：

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

const level = [0,0,0,0,0];
var xToDraw = 0;
var yToDraw = 0;


var img0 = new Image();
img0.src = "./images/tiles/grass.png";

var img1 = new Image();
img1.src = "./images/tiles/dirt.png";

var img2 = new Image();
img2.src = "./images/tiles/sand.png";
function drawLevel(){
  // solution
  level.map((item1) => {
    yToDraw-=16
    item1.map((item2) => {
      if(item2==0){
        context.drawImage(img0, xToDraw, yToDraw);
      }
      xToDraw+=16;
    });
  });
}
  drawLevel();

注意：这是使用电子运行，页面正在加载到窗口。

抛出的错误是：TypeError：document.getElementById(...).getContext is not a function

感谢您解决此错误的任何帮助。

Answer 1

这是因为你拼错了你的画布标签：

<canavs id="gameCanvas"></canvas>

应该是：

<canvas id="gameCanvas"></canvas>

我从javascript代码中收到错误：var context = document.getElementById（“gameCanvas”）。getContext（“2d”）;

1 个答案: