logo标签列表

如何在DIV中添加一个HTML5画布(Canvas)

javascripthtmlcanvas
7
我正在使用以下代码来生成一个 canvas。目前它将 canvas 元素添加到 body，我该如何将它添加到名为 "divGameStage" 的 div 中？该 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>
可能是使用JavaScript将画布添加到页面的重复问题。 - Vadzim
4个回答
18

只需尝试此代码，肯定会为您工作：

<!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)"应该改为"id"。

如果还是无法正常工作，则可能是因为您正在Internet Explorer上测试(特别是< IE9)
如果是这种情况，请注意，IE9及以上版本支持canvas,而其他低版本不支持canvas。

干杯!!!

谢谢你的建议，我显然没有注意到我的引号和大小写！ - aSystemOverload
4
你只需要将它附加到你的<div>上，而不是body上：
<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>

非常简单 :-）
1
谢谢，但是画布没有出现，我已经粘贴了更新的代码，我是在错误的位置调用loadCanvas还是其他原因？ - aSystemOverload
当你说“不出现”时，你是否检查了源代码？我非常确定在这种情况下，除非你在画布上绘制，否则你看不到它。 - Stuart
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>
1
这里唯一的问题是：
loadCanvas(divGameStage);

将divGameStage用引号括起来：

loadCanvas("divGameStage");

由于需要将其作为字符串运行通过getElementById。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接