gpt4 book ai didi

javascript - 如何在 DIV 中添加 html5 CANVAS

转载 作者:太空狗 更新时间:2023-10-29 15:26:16 30 4
gpt4 key购买 nike

我正在使用下面的代码生成一个canvas。目前它将 Canvas 元素添加到 body,我怎样才能将它添加到名为“divGameStage”的 div,它没有嵌套在任何其他元素中, body 除外。

编辑:我已经尝试了第一个建议,但是没有 Canvas 出现,完整代码如下:

<head>
<meta charset="utf-8">
<title>Game Stage</title>
<script type="text/javascript">
function loadCanvas(id) {
var canvas = document.createElement('canvas');
div = document.getElementByID(id);
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas)
}
</script>
</head>
<body>
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<div id="divControls"></div>
<div id="divGameStage"></div>
<script type="text/javascript">
loadCanvas(divGameStage);
</script>
</body>
</html>

最佳答案

只要试试这段代码,它肯定会为你工作:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Game Stage</title>
<script type="text/javascript">
function loadCanvas(id) {
var canvas = document.createElement('canvas');
div = document.getElementById(id);
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas)
}
</script>
</head>
<body>
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<div id="divControls"></div>
<div id="divGameStage"></div>
<script type="text/javascript">
loadCanvas("divGameStage");
</script>
</body>
</html>

请记住一些事情:

  • 错误 1 ​​是 loadCanvas("divGameStage") 中缺少引号;
  • 错误 2 是语法错误 div = document.getElementById(id); “..ID(id)”在您的代码中。

如果它也不起作用,那么我确定您正在 Internet Explorer 上测试它 (specially < IE9)
如果是这种情况,仅供引用 IE9 及更高版本支持 Canvas ,其他较小版本不支持 Canvas

干杯!!!

关于javascript - 如何在 DIV 中添加 html5 CANVAS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11816431/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com