Question

我收到以下错误

错误：未捕获的TypeError：无法读取null的属性“innerHTML” 在script.js：1

我已经尝试了我能想到的一切，但没有任何作用。

var canvas = document.getElementById("can").innerHTML;
var ctx = canvas.getContext("2d");
ctx.fillStyle = ("green");
ctx.fillRect(0, 0, 300, 200);

<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<script src="script.js"></script>
<!-- Canvas  -->
<canvas id="can" width="300" height="200" style="border:4px solid red;">
</canvas
</body>
</html>

Answer 1

好的，有两个严重的错误。

您正在尝试在DOM完全加载之前获取该元素。因此无法访问canvas注释。见addEventListener 和DOMContentLoaded。
删除.innerHTML。 getContext附加在不在内容上的节点上。

document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, 300, 200);
});

<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<script src="script.js"></script>
<!-- Canvas  -->
<canvas id="can" width="300" height="200" style="border:4px solid red;">
</canvas>
</body>
</html>

Answer 2

有两件事首先，您不需要.innerHTML作为其他答案其次，您必须在窗口加载事件中运行脚本，如下所示：

window.addEventListener('load', function () {
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = ("green");
    ctx.fillRect(0, 0, 300, 200);
});

或者你应该在canvas标签后加载javascript。

Answer 3

1。使用画布时出现脚本错误

使用var canvas = document.getElementById("can");

不是var canvas = document.getElementById("can").innerHTML();

请参阅W3C - Canvas

2。在文档准备好后添加事件侦听器，然后执行脚本

请参阅W3C - DOM Event Listener example

function doSomething() {
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext('2d');
    /*
    another scripts...
    */
}

window.addEventListener('onload', doSomething, false);

canvas.getContext（ “2D”）;不工作

3 个答案:

1。使用画布时出现脚本错误

2。在文档准备好后添加事件侦听器，然后执行脚本