1. ホーム
  2. javascript

[解決済み] HTML5 動的なキャンバスの作成

2023-07-02 13:44:12

質問

こんにちは、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を使用してキャンバスを作成する良い方法はありますか?

どのように解決するのですか?

canvas要素を文書本文に挿入していないことが問題です。

次のようにすればよい。

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