Fatal编程技术网
  • javascript/
  • Javascript 引用画布时的空指针

Javascript 引用画布时的空指针

javascript html canvas

Javascript 引用画布时的空指针,javascript,html,canvas,Javascript,Html,Canvas,我试图在画布上画画，但每次尝试时，我都会收到一个错误，说有东西是空的。我很困惑为什么会发生这种情况，因为当我在web浏览器中测试代码时，画布被绘制到屏幕上。有人知道为什么我的代码中总是出现空异常吗 JavaScript函数： function draw() { var tw = canvas.width/grid.width; var th = canvas.height/grid.height; for (var x = 0; x < grid.width; x++) { for

我试图在画布上画画，但每次尝试时，我都会收到一个错误，说有东西是空的。我很困惑为什么会发生这种情况，因为当我在web浏览器中测试代码时，画布被绘制到屏幕上。有人知道为什么我的代码中总是出现空异常吗

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);
  }
}
我尝试定义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>


开始
如果脚本源标记位于html文件的头部，请尝试将其移动到正文画布下方的行。如果是这种情况，那么在创建元素之前JS正在运行。由于您有一个内联宽度和高度，画布仍在浏览器中绘制，但此时为时已晚

<html>
  <body>
    <canvas id="yourCanvas"></canvas>
    <script src="yourScript.js"></script>
  </body>
</html>
您好，如果您想让人们帮助您，他们需要能够重现您的问题。请发布最小的、完整的、可验证的代码（不是图像）：由于某种原因，您无法从
getElementById（）
获得任何信息。您是否在DOM准备就绪之前运行代码？您是否仔细检查了
Id
？除非你发布的代码再现了这个问题，否则没有多少人可以帮助你。没有足够的代码来确定答案。我们看不到您的
网格
。此外，该
开关中的每个
案例都是
var
。

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