HTML5 créer dynamiquement Canvas

Salut, j'ai une question sur la création dynamique d'une toile en utilisant javascript.

Je crée une toile comme ceci: 

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

Mais quand j'essaie de le localiser, j'obtiens une valeur null: 

cursorLayer = document.getElementById("CursorLayer");

Est-ce que je le fais mal? Existe-t-il une meilleure façon de créer une toile en utilisant JavaScript?

50
demandé sur Phrogz 2012-05-18 16:18:33

3 réponses

Le problème est que vous n'insérez pas votre toile élément dans le corps du document.

Faites simplement ce qui suit: 

document.body.appendChild(canvas);

Exemple:

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);
81
répondu VisioN 2017-09-24 06:47:07

Via Jquery: 

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

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

1
répondu Razan Paul 2016-05-09 23:19:29

Cela arrive parce que vous l'appelez avant que DOM ne soit chargé. Tout d'abord, créez l'élément et ajoutez atrributes, puis après DOM a chargé l'appeler. Dans votre cas, cela devrait ressembler à ceci: 

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
répondu goblin01 2018-03-02 16:07:55