我试图在我的简单瓷砖地图上显示fps（右上角），但由于某种原因，当我加载它时它不会出现在浏览器上。我一直在youtube上关注Technologies4 me的教程，只对代码进行了一些不同的调整。我是初学者，所以这可能是一个错字，但我真的很感激一些帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="game" width="600" height="300"></canvas>
<script>
var ctx=null;
var tileW=30, TileH=30;
var mapW=20, mapH=10;
var currentSecond= 0, frameCount=0, framesLastSecond=0;
var gameMap=[
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,3,3,0,0,3,3,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,0,0,0,0,0,
0,0,0,0,2,2,2,2,2,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,2,2,2,2,2,2,2,0,0,0,0,0,0,2,0,0,2,
1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,
];
window.onload=function(){
ctx=document.getElementById("game").getContext("2d");
requestAnimationFrame(drawGame);
ctx.font="bold 10px sans-serif";
};
function drawGame(){
if(ctx==null){return;}
var sec=Math.floor(Date.now()/1000);
if(sec!=currentSecond){
currentSecond=sec;
framesLastSecond=frameCount;
frameCount=1;
}
else{frameCount++;}
for(var y=0; y<mapH; y++){
for(var x=0; x<mapW; x++){
switch(gameMap[((y*mapW)+x)]){
case 0:
ctx.fillStyle="White";
break;
default:
ctx.fillStyle="Green";
}
ctx.fillRect(x*tileW,y*TileH,tileW,TileH);
}
}
ctx.fillStyle="Red";
ctx.fillText=("FPS: "+framesLastSecond, 10, 20);
requestAnimationFrame(drawGame);
}
</script>
</body>
</html>这只是一个错字。 ctx.fillText是一个函数，但你分配给它而不是调用它。
删除=中的ctx.fillText=("FPS: "+framesLastSecond, 10, 20);：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="game" width="600" height="300"></canvas>
<script>
var ctx = null;
var tileW = 30,
TileH = 30;
var mapW = 20,
mapH = 10;
var currentSecond = 0,
frameCount = 0,
framesLastSecond = 0;
var gameMap = [
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, 3, 3, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0,
0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 2, 0, 0, 2,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1,
];
window.onload = function() {
ctx = document.getElementById("game").getContext("2d");
ctx.font = "bold 10px sans-serif";
requestAnimationFrame(drawGame);
};
function drawGame() {
if (ctx == null) {
return;
}
var sec = Math.floor(Date.now() / 1000);
if (sec != currentSecond) {
currentSecond = sec;
framesLastSecond = frameCount;
frameCount = 1;
} else {
frameCount++;
}
for (var y = 0; y < mapH; y++) {
for (var x = 0; x < mapW; x++) {
switch (gameMap[((y * mapW) + x)]) {
case 0:
ctx.fillStyle = "White";
break;
default:
ctx.fillStyle = "Green";
}
ctx.fillRect(x * tileW, y * TileH, tileW, TileH);
}
}
ctx.fillStyle = "Red";
ctx.fillText("FPS: " + framesLastSecond, 10, 20);
requestAnimationFrame(drawGame);
}
</script>
</body>
</html>改变这个：
ctx.fillText=("FPS: "+framesLastSecond, 10, 20);
对此：
ctx.fillText("FPS: "+framesLastSecond, 10, 20);