我正在开发一款游戏。但是，我似乎无法像以前那样了解画布的上下文。我的 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();
注意：这是使用电子运行的，页面正在加载到窗口。
引发的错误是：类型错误：document.getElementById(...).getContext is not a function
我将不胜感激解决此错误的任何帮助。
这是因为
您的画布标签拼写错误：
<canavs id="gameCanvas"></canvas>
应该是：
<canvas id="gameCanvas"></canvas>