如何在 DIV 中添加 html5 画布答案

【问题标题】：How to add a html5 CANVAS within a DIV如何在 DIV 中添加 html5 画布
【发布时间】：2012-08-02 17:23:26
【问题描述】：

我正在使用以下代码生成canvas。目前它将画布元素添加到body，我怎样才能让它添加到名为“divGameStage”的div，它不嵌套在任何其他元素中，除了body。

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

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

【问题讨论】：

Add canvas to a page with javascript的可能重复

标签： javascript html canvas

【解决方案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 是 loadCanvas("divGameStage"); 中缺少引号
错误 2 是语法错误 div = document.getElementById(id); “..ID(id)”在您的代码中。

如果它也不起作用，那么我确定您正在 Internet Explorer 上测试它(specially < IE9)
如果是这种情况，仅供参考 IE9 及以上版本支持画布，没有其他较低版本支持画布

干杯！！！

【讨论】：

感谢您的提示，我显然没有注意我的报价和案例！

【解决方案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>

很简单:-)

【讨论】：

谢谢，但没有出现画布，我已经粘贴了更新的代码，我是在错误的地方调用 loadCanvas 还是别的什么？
当你说没有出现时你检查过来源吗？我敢肯定，除非您在这种情况下绘制画布，否则您不会看到画布。

【解决方案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>

【讨论】：

【解决方案4】：

这里唯一的问题是：

loadCanvas(divGameStage);

将divGameStage 括在引号中：

loadCanvas("divGameStage");

因为它需要是一个字符串才能贯穿getElementById。

【讨论】：