问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

canvas.getContext("2d");不工作

社区维基
1
新手上路，请多包涵

我收到以下错误

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

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

 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>

原文由 Ridertvis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtml
阅读 884
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

  1. 您试图在 DOM 完全加载之前获取元素。因此，无法访问 canvas 注释。请参阅 addEventListener 和 DOMContentLoaded 。
  2. 删除 .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>

原文由 Werner 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

1.使用canvas时脚本错误

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

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

请参阅 W3C - 画布

2. 文档准备好后添加一个事件监听器，然后执行你的脚本

请参阅 W3C - DOM 事件侦听器示例

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

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

原文由 Tony Chou 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答
推荐问题