javascript - 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>

同样，我还没有找到解决方案。因此，如果这个社区中的任何人都可以帮助我，那就太好了。

标签： javascripthtmlhtml5-canvas

解决方案

您的代码中有两个错误：

而不是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>

javascript - ctx.fillRect 不是函数

问题描述

解决方案

推荐阅读