ctx.fillRect不是一个函数
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ctx.fillRect不是一个函数相关的知识，希望对你有一定的参考价值。
我正在尝试编写一个RPG游戏，但是当我第一次开始我的代码时，它说fillRect不是一个函数。现在我已多次使用fillRect但从未遇到过这个错误。如果你能帮助我 - 这将是伟大的！
我的代码：
<!DOCTYPE html>
<html><head>
<script type="text/javascript">
var ctx = null;
var tileW = 40,
tileH = 40;
var mapW = 10,
mapH = 10;
var currentSecond = 0,
frameCount = 0,
frameLastSecond = 0;
var gameMap =
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
0, 1, 0, 1, 0, 0, 0, 1, 1, 0,
0, 1, 0, 1, 0, 0, 0, 1, 1, 0,
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];
window.onload = function ()
{
ctx = document.getElementById('game');
requestAnimationFrame(drawGame);
ctx.font = "bold 18pt sans-serif";
};
function drawGame ()
{
if(ctx == null){return;}
var sec = Math.floor(Date.now()/ 1000);
if(sec!= currentSecond)
{
currentSecond = sec;
frameLastSecond = 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 = "#999999";
break;
default:
ctx.fillStyle = "#eeeeee";
}
ctx.fill(x*tileW, y*tileH, tileW, tileH);
}
}
ctx.fillStyle = "#ff0000";
ctx.fillText("FPS: " + frameLastSecond, 10, 20);
requestAnimationFrame(drawGame);
}
</script>
</head><body>
<canvas id="game" width="400" height="400"></canvas>
</body></html>
我还没有找到解决方案。所以，如果这个社区中的任何人都可以帮助我 - 这会很棒。
答案
您的代码中有两个错误：
- 而不是
ctx = document.getElementById('game');你必须写var canvas = document.getElementById('game'); ctx = canvas.getContext('2d');或ctx = document.getElementById('game').getContext('2d'); - 而不是
ctx.fill(x * tileW, y * tileH, tileW, tileH);你必须写ctx.fillRect(x * tileW, y * tileH, tileW, tileH);
我为你纠正了它：
<!DOCTYPE html>
<html><head>
<script type="text/javascript">
var ctx = null,
tileW = 40,
tileH = 40,
mapW = 10,
mapH = 10,
currentSecond = 0,
frameCount = 0,
frameLastSecond = 0;
var gameMap =
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
0, 1, 0, 1, 0, 0, 0, 1, 1, 0,
0, 1, 0, 1, 0, 0, 0, 1, 1, 0,
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];
window.onload = function()
{
// here was the first mistake:
ctx = document.getElementById('game').getContext('2d');
requestAnimationFrame(drawGame);
ctx.font = "bold 18pt sans-serif";
};
function drawGame()
{
if (ctx == null) {return;}
var sec = Math.floor(Date.now()/ 1000);
if(sec!= currentSecond)
{
currentSecond = sec;
frameLastSecond = 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 = "#999999";
break;
default:
ctx.fillStyle = "#eeeeee";
}
// here was the second mistake:
ctx.fillRect(x * tileW, y * tileH, tileW, tileH);
}
}
ctx.fillStyle = "#ff0000"
ctx.fillText("FPS: " + frameLastSecond, 10, 20);
requestAnimationFrame(drawGame);
}
</script>
</head><body>
<canvas id="game" width="400" height="400"></canvas>
</body></html>以上是关于ctx.fillRect不是一个函数的主要内容，如果未能解决你的问题，请参考以下文章