web-dev-qa-db-ja.com

HTML5によるCanvasの動的な作成

こんにちは、javascriptを使用してキャンバスを動的に作成することについて質問があります。

このようなキャンバスを作成します。

var canvas = document.createElement('canvas');
canvas.id     = "CursorLayer";
canvas.width  = 1224;
canvas.height = 768;
canvas.style.zIndex   = 8;
canvas.style.position = "absolute";
canvas.style.border   = "1px solid";

しかし、それを見つけようとすると、null値を取得します。

cursorLayer = document.getElementById("CursorLayer");

私は間違っていますか？ JavaScriptを使用してキャンバスを作成するより良い方法はありますか？

javascripthtmlcanvas
60
Arjen van Heck

問題は、キャンバス要素をドキュメント本文に挿入しないことです。

以下を実行してください。

document.body.appendChild(canvas);

例：

var canvas = document.createElement('canvas');

canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";


var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

cursorLayer = document.getElementById("CursorLayer");

console.log(cursorLayer);

// below is optional

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);
94
VisioN

Jquery経由：

$('<canvas/>', { id: 'mycanvas', height: 500, width: 200});

http://jsfiddle.net/8DEsJ/736/

1
Razan Paul

試して

document.body.innerHTML = "<canvas width=500 height=150 id='CursorLayer'>";

var ctx = CursorLayer.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 50, 50);
canvas { border: 1px solid black }
0
Kamil Kiełczewski

これは、DOMがロードされる前に呼び出すために発生します。まず、要素を作成して属性を追加し、DOMが読み込まれた後に呼び出します。あなたの場合、それはそのように見えるはずです：

var canvas = document.createElement('canvas');
canvas.id     = "CursorLayer";
canvas.width  = 1224;
canvas.height = 768;
canvas.style.zIndex   = 8;
canvas.style.position = "absolute";
canvas.style.border   = "1px solid";
window.onload = function() {
    document.getElementById("CursorLayer");
}
0
goblin01