7

以下のコードを使用してcanvas. body現時点では、canvas 要素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>
4

4 に答える 4

17

このコードを試すだけで、きっとうまくいくでしょう：

<!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)
これらの場合、FYI IE9 以降はキャンバスをサポートしており、他の下位バージョンではキャンバスをサポートしていません。

乾杯！！！

于 2012-08-06T07:52:26.930 に答える
4

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

非常に単純に ：-）

于 2012-08-05T12:38:38.500 に答える
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>
于 2012-08-05T12:42:58.147 に答える
1

ここでの唯一の問題はこれです：

loadCanvas(divGameStage);

引用divGameStage符で囲みます：

loadCanvas("divGameStage");

を実行するには文字列である必要があるためgetElementByIdです。

于 2012-08-05T19:11:27.563 に答える