无法使用画布读取 null 的属性“getContext”答案

【问题标题】：Cannot read property 'getContext' of null, using canvas无法使用画布读取 null 的属性“getContext”
【发布时间】：2012-05-04 17:20:42
【问题描述】：

我收到错误Uncaught TypeError: Cannot read property 'getContext' of null 并且文件中的重要部分是...我想知道由于game.js 在下面的目录中，它找不到画布吗？我该怎么办？

./index.html:

<canvas id="canvas" width="640" height="480"></canvas>

./javascript/game.js:

var Grid = function(width, height) {
        ...
        this.draw = function() {
        var canvas = document.getElementById("canvas");
        if(canvas.getContext) {
            var context = canvas.getContext("2d");
            for(var i = 0; i < width; i++) {
                for(var j = 0; j < height; j++) {
                    if(isLive(i, j)) {
                        context.fillStyle = "lightblue";
                    }
                    else {
                        context.fillStyle = "yellowgreen";
                    }
                    context.fillRect(i*15, j*15, 14, 14);
                }
            }
        }
    }
}

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

我猜问题是你的 js 在加载 html 之前运行。

如果您使用的是 jquery，则可以使用文档准备功能来包装您的代码：

$(function() {
    var Grid = function(width, height) {
        // codes...
    }
});

或者干脆把你的js放在<canvas>之后。

【讨论】：

我还在练习 javascript。我将如何修改 html/js 文件以包含 jquery？
下载 jquery here，然后将其添加到您的文件 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>。将您的代码放入$(function() { });，就像我在回答中写的那样。
如果是简单的html页面，还可以在body元素末尾维护script标签，以便在html渲染完成后加载。
使用jQuery只是为了初始化一个Canvas？？？很明显，当浏览器的战争和代码彼此不兼容时，大多数程序员都停留在过去。我见过人们使用 jQuery 只是为了抛出最基本的元素原始“Hello world”警报，坦率地说这很荒谬。

【解决方案2】：

您不必包含 JQuery。

在 index.html 中：
<canvas id="canvas" width="640" height="480"></canvas><script src="javascript/game.js"> 这应该在没有 JQuery 的情况下工作......

编辑：你应该把脚本标签放在正文标签中...

【讨论】：

【解决方案3】：

您应该将 javascript 标签放入您的 html 文件中。因为浏览器会根据 html 流程加载您的网页，所以您应该将您的 javascript 文件<script src="javascript/game.js"> 放在 <canvas>element 标记之后。否则，如果您将 javascript 放在 html.Browser 加载脚本的标题中，但它没有找到画布。所以你的画布不起作用。

【讨论】：

【解决方案4】：

以这种方式编写代码...

<canvas id="canvas" width="640" height="480"></canvas>
<script>
var Grid = function(width, height) {
    ...
    this.draw = function() {
    var canvas = document.getElementById("canvas");
    if(canvas.getContext) {
        var context = canvas.getContext("2d");
        for(var i = 0; i < width; i++) {
            for(var j = 0; j < height; j++) {
                if(isLive(i, j)) {
                    context.fillStyle = "lightblue";
                }
                else {
                    context.fillStyle = "yellowgreen";
                }
                context.fillRect(i*15, j*15, 14, 14);
                }
            }
        }
    }
 }

先写canvas标签，再写script标签。并在正文中写入脚本标签。

【讨论】：

【解决方案5】：

将您的 JavaScript 代码放在您的标签 <canvas></canvas> 之后

【讨论】：

我不认为你可以在 React js 文件中做到这一点
@JedLancer 在 React js 中你可以使用 UseRef 来调用 Canvas 这样你可能不会遇到同样的麻烦
@JedLancer 考虑stackoverflow.com/a/62247320/7706354这个链接如果你使用react js

【解决方案6】：

你只需要在你的

【讨论】：

【解决方案7】：

这看起来有点矫枉过正，但如果在另一种情况下您试图从 js 加载画布（就像我正在做的那样），您可以使用 setInterval 函数和 if 语句来不断检查画布是否已加载。

//set up the interval
var thisInterval = setInterval(function{
  //this if statment checks if the id "thisCanvas" is linked to something
  if(document.getElementById("thisCanvas") != null){
    //do what you want


    //clearInterval() will remove the interval if you have given your interval a name.
    clearInterval(thisInterval)
  }
//the 500 means that you will loop through this every 500 milliseconds (1/2 a second)
},500)

（在此示例中，我尝试加载的画布的 id 为“thisCanvas”）

【讨论】：

【解决方案8】：

我假设您的 JS 文件在 <head> 标记内声明，因此它保持一致，就像标准一样，然后在您的 JS 中确保画布初始化是在页面加载之后：

window.onload = function () {
    var myCanvas = document.getElementById('canvas');
    var ctx = myCanvas.getContext('2d');
}

没有必要仅仅使用 jQuery 来初始化画布，很明显世界各地的大多数程序员都在不必要地使用它，而公认的答案就是对此的一种探索。

【讨论】：