HTML5 Dynamisch Canvas erstellen

Question

Hallo, ich habe eine Frage zum dynamischen Erstellen einer Leinwand mit Javascript.

mache ich eigentlich eine Leinwand wie folgt aus:

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

aber wenn ich versuche, es zu finden, erhalte ich eine null Wert:

cursorLayer = document.getElementById("CursorLayer"); 

Bin ich es falsch? Gibt es eine bessere Möglichkeit, eine Leinwand mit JavaScript zu erstellen?

Answer 1

Das Problem besteht darin, dass Sie Ihr Canvas-Element nicht in den Dokumentkörper einfügen.

tun Sie einfach das folgende:

document.body.appendChild(canvas); 

Beispiel:

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

Answer 2

Via JQuery:

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

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

Answer 3

Es passiert, weil Sie es aufrufen, bevor DOM geladen hat. Erstellen Sie zuerst das Element und fügen Sie attributes dazu hinzu, und rufen Sie es nach Aufruf von DOM auf. In Ihrem Fall sollte es so aussehen:

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