Question

我试图在画布上绘画，但是每次尝试时，我都会收到一条错误消息，指出某事为空。我很困惑为什么会这样，因为当我在Web浏览器中测试代码时，画布被绘制到了屏幕上。有谁知道为什么我的代码中总是出现null异常？

JavaScript函数：

function draw() {
var tw = canvas.width/grid.width;
var th = canvas.height/grid.height;

for (var x = 0; x < grid.width; x++) {
  for (var y = 0; y < grid.height; y++) {
    switch (grid.get(x, y)) {
      case EMPTY:
        ctx.fillStyle = "#ccc";
        break;
      case PLAYER1:
        ctx.fillStyle = "#000";
        break;
      case PLAYER2:
        ctx.fillStyle = "#f00";
        break;
    }
    ctx.fillRect(x * tw, y * th, tw, th);
  }
}

我得到空异常的地方：

var canvas, ctx, keystate1, frames, score = {p1: 0, p2: 0};

function main() {
   canvas = document.getElementById("myCanvas");
   ctx = canvas.getContext('2d');

我尝试定义ctx时发生了异常

</div>
</center>

<center>
<div>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</div>
</center>

</form>
  <div style="text-align:center;width:480px;">
  <button onclick="ifi()">Start</button>
</div>

HTML画布初始化：

</div>
</center>

<center>
<div>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</div>
</center>

</form>
<div style="text-align:center;width:480px;">
<button onclick="ifi()">Start</button>
  </div>
</body>

Answer 1

如果脚本源标签位于html文件的开头，请尝试将其移至正文中画布下方的行。如果是这种情况，则在创建元素之前，您的JS正在运行。由于您具有内联的宽度和高度，因此仍在浏览器中绘制画布，但是那时已经太晚了。

<html>
  <body>
    <canvas id="yourCanvas"></canvas>
    <script src="yourScript.js"></script>
  </body>
</html>

引用画布时为空指针

1 个答案: