Question

我正在使用以下代码生成canvas。目前它将canvas元素添加到body，如何将其添加到名为“divGameStage”的div中，除了{{1}之外，它不嵌套在任何其他元素中}。

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

body

Answer 1

试试这段代码，肯定会对你有用：

<!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.错误No 1缺少loadCanvas（“divGameStage”）中的引号; 2.错误No 2是语法错误div = document.getElementById（id）; “..ID（id）”在您的代码中。

如果那时它也不起作用那么我确定你在Internet Explorer上测试它（特别是＆lt; IE9） - 如果是这种情况，FYI IE9及以上版本支持画布，其他较小版本不支持画布

干杯!!!

Answer 2

您只需将其附加到<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>

很简单： - ）

Answer 3

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

Answer 4

这里唯一的问题是：

loadCanvas(divGameStage);

用引号括起divGameStage：

loadCanvas("divGameStage");

因为它需要是一个要通过getElementById运行的字符串。

如何在DIV中添加html5 CANVAS

4 个答案: