Javascript 如何在DIV中添加html5画布_Javascript_Html_Canvas

Javascript 如何在DIV中添加html5画布

javascript html canvas

Javascript 如何在DIV中添加html5画布,javascript,html,canvas,Javascript,Html,Canvas,我正在使用下面的代码生成一个画布。现在它将canvas元素添加到主体，我如何让它添加到名为“divGameStage”的div，它不嵌套在任何其他元素中，除了主体编辑：我尝试了第一个建议，但没有画布出现，完整代码如下： <head> <meta charset="utf-8"> <title>Game Stage</title> <script type="text/javascript"> function loadCanv

我正在使用下面的代码生成一个

画布

。现在它将canvas元素添加到

主体

，我如何让它添加到名为“divGameStage”的

div

，它不嵌套在任何其他元素中，除了

主体

编辑：我尝试了第一个建议，但没有画布出现，完整代码如下：

<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>


游戏阶段
函数loadCanvas（id）{
var canvas=document.createElement（'canvas'）；
div=document.getElementByID（id）；
canvas.id=“CursorLayer”；
画布宽度=1224；
canvas.height=768；
canvas.style.zIndex=8；
canvas.style.position=“绝对”；
canvas.style.border=“1px solid”；
div.appendChild（画布）
}
本页最重要的标题
附带一些补充资料
loadCanvas（divGameStage）；

您只需将其附加到您的

而不是正文：


函数loadCanvas（id）{
var canvas=document.createElement（'canvas'），
div=document.getElementById（id）；
canvas.id=“canvGameStage”；
画布宽度=1000；
canvas.height=768；
canvas.style.zIndex=8；
canvas.style.position=“绝对”；
canvas.style.border=“1px solid”；
子类（画布）；
}
/* ... */
loadCanvas（“divGameStage”）；

非常简单：-）


函数loadCanvas（）{
var canvas=document.createElement（'canvas'）；
canvas.id=“canvGameStage”；
画布宽度=1000；
canvas.height=768；
canvas.style.zIndex=8；
canvas.style.position=“绝对”；
canvas.style.border=“1px solid”；
var div=document.createElement（“div”）；
div.className=“divGameStage”；
子类（画布）；
document.body.appendChild（div）
}

这里唯一的问题是：

loadCanvas(divGameStage);

将

divGameStage

用引号括起来：

loadCanvas("divGameStage");

由于它需要是一个字符串才能通过

getElementById

运行，因此只需尝试此代码，肯定会对您有用：

<!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>


游戏阶段
函数loadCanvas（id）{
var canvas=document.createElement（'canvas'）；
div=document.getElementById（id）；
canvas.id=“CursorLayer”；
画布宽度=1224；
canvas.height=768；
canvas.style.zIndex=8；
canvas.style.position=“绝对”；
canvas.style.border=“1px solid”；
div.appendChild（画布）
}
本页最重要的标题
附带一些补充资料
loadCanvas（“divGameStage”）；

有些事情要记住：

错误1是loadCanvas（“divGameStage”）中缺少引号
错误2是语法错误div=document.getElementById（id）；“.ID（ID）”在您的代码中

如果它也不起作用，那么我确信您正在Internet Explorer上测试它

（特别是



如果是这种情况，FYI IE9及以上版本支持canvas，没有其他较低版本支持canvas
干杯 谢谢，但是没有画布出现，我粘贴了更新的代码，我是在错误的位置调用loadCanvas还是其他原因？当你说没有出现时，你检查了源代码了吗？我很确定画布在你画出来之前是看不见的。谢谢你的提示，我显然没有注意我的引用和案例！可能重复的
<!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>