Question

我正在尝试创建一个简单的html 5画布，但它看起来好像我的JavaScript没有返回正确的东西：

<!DOCTYPE HTML>
<html>
<head></head>
<body>

<script>
var c = document.getElementById("myCanvas");
console.log(c);
// var ctx = c.getContext("2d");
// ctx.fillStyle = "#FF0000";
// ctx.fillRect(0,0,150,75);
</script>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

</body>
</html>

即使该元素存在，我的控制台日志也会返回null。我已经检查过，我的浏览器确实支持2D图形和画布。

Answer 1

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
console.log(c);
</script>

注意：首先，您必须在脚本中包含DOM元素，除非您不知道DOM已经完全加载。尽管如此，您的脚本中的DOM元素位置可以编写如下JavaScript：

window.onload = function(){
    // here goes your code
};

Answer 2

这是因为你的画布还不在DOM中。

将其包裹在window.onload

中

window.onload = function(){
   var c = document.getElementById("myCanvas");
   console.log(c);
}

Answer 3

您的dom（canvas）还没有为您的脚本做好准备，请将您的代码放入window.onload

 window.onload = function (){
    //this scripts runs when your canvas is ready  
    var c = document.getElementById("myCanvas");
    console.log(c);
}

html5画布绘图未被识别

3 个答案: