画布 id 未在 javascript 中识别
我试图找出为什么我的 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 无法识别这一点。
慕虎73712782回答
-
眼眸繁星
快速修复：将document.writeclient1.js 中的调用替换为console.logdocument.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属性来控制它们的加载方式
随时随地看视频慕课网APP
相关分类
JavaScript