我试图找出为什么我的 html canvas 元素在 javascript 中不被识别。我不确定为什么我的画布元素为空。我在 html 中定义了它，并且只有在 DOMContentLoaded 事件被触发后才运行 javascript。索引.html：<!DOCTYPE html><html> <head> <title>Whiteboard</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" /> </head> <body> <canvas id="canvas">Your browser doesn't support "canvas".</canvas> <!--<script src="/node_modules/socket.io/socket.io.js"></script>--> <script type="text/javascript" src="client1.js"></script> </body></html>客户端1.js： document.addEventListener("DOMContentLoaded", function() { var mouse = { click: false, move: false, pos: {x:0, y:0}, pos_prev: false }; // get canvas element and create context document.write("Hetoo "); var canvas = document.getElementById("canvas"); if(canvas) { document.write("got her."); } else { document.write(canvas); } document.write(" Hepoo "); var context = canvas.getContext('2d'); document.write("Heyoo "); }网页输出：Hetoo null Hepoo我希望画布不为空，但由于某种原因，javascript 无法识别这一点。
2 回答
眼眸繁星
TA贡献1873条经验 获得超9个赞
快速修复：将document.writeclient1.js 中的调用替换为console.log
document.addEventListener("DOMContentLoaded", function() {
var mouse = {
click: false,
move: false,
pos: {x:0, y:0},
pos_prev: false
};
// get canvas element and create context
var mouse = {
click: false,
move: false,
pos: {x:0, y:0},
pos_prev: false
};
// get canvas element and create context
console.log("Hetoo ");
var canvas = document.getElementById("canvas");
if(canvas)
{
console.log("got her.");
}
else
{
console.log(canvas);
}
console.log(" Hepoo ");
var context = canvas.getContext('2d');
console.log("Heyoo ");
})
您还应该考虑将脚本标记移动到head元素中，并在必要时使用async或defer属性来控制它们的加载方式
添加回答
举报
0/150
提交
取消