Javascript 如何在 DIV 中添加 html5 CANVAS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11816431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a html5 CANVAS within a DIV
提问by aSystemOverload
I'm using the below code to generate a canvas. At the moment it adds the canvas element to the body, how can I get it to add it to a divnamed "divGameStage", which is not nested within any other elements, except body.
我正在使用下面的代码生成一个canvas. 目前它将 canvas 元素添加到 中body，我如何才能将其添加到div名为“divGameStage”的元素中，该元素不嵌套在任何其他元素中，除了body.
EDIT: I've tried the first suggestion, but no canvas is appearing, full code is as follows:
编辑：我已经尝试了第一个建议，但没有出现画布，完整代码如下：
<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>
回答by GOK
Just try this code and will work for you surely:
试试这个代码，肯定会为你工作：
<!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>
Some things keep in mind:
请记住以下几点：
- Error No 1 is missing quotes in loadCanvas("divGameStage");
- Error No 2 is syntax error div = document.getElementById(id); "..ID(id)" was in your code.
- 错误 1 在 loadCanvas("divGameStage") 中缺少引号；
- 错误 2 是语法错误 div = document.getElementById(id); “..ID(id)”在您的代码中。
If then also it doesnt work then i am sure that you are testing it on Internet Explorer (specially < IE9)
If these is the case, FYI IE9 and above supports canvas no other lesser version supports canvas
如果它也不起作用，那么我确定您正在 Internet Explorer 上测试它(specially < IE9)
如果是这种情况，仅供参考 IE9 及更高版本支持画布没有其他较低版本支持画布
Cheers!!!
干杯！！！
回答by m-r-r
You just have to append it to your <div>instead of the body:
您只需将其附加到您的<div>而不是正文中：
<script type="text/javascript">
function loadCanvas(id) {
var canvas = document.createElement('canvas'),
div = document.getElementById(id);
canvas.id = "canvGameStage";
canvas.width = 1000;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas);
}
/* ... */
loadCanvas("divGameStage");
</script>
Quite simply :-)
很简单:-)
回答by timothyclifford
<script type="text/javascript">
function loadCanvas() {
var canvas = document.createElement('canvas');
canvas.id = "canvGameStage";
canvas.width = 1000;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
var div = document.createElement("div");
div.className = "divGameStage";
div.appendChild(canvas);
document.body.appendChild(div)
}
</script>
回答by Purag
The only problem here is this:
这里唯一的问题是：
loadCanvas(divGameStage);
Wrap divGameStagein quotes:
裹divGameStage在报价：
loadCanvas("divGameStage");
Since it needs to be a string to be run through getElementById.
因为它需要是一个字符串来运行getElementById。
