web-dev-qa-db-fra.com

HTML5 créer dynamiquement Canvas

Bonjour, j'ai une question sur la création dynamique d'une toile à l'aide de 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 lorsque j'essaie de le localiser, j'obtiens une valeur null:

cursorLayer = document.getElementById("CursorLayer");

Est-ce que je me trompe? Existe-t-il un meilleur moyen de créer une toile à l'aide de JavaScript?

javascripthtmlhtml5canvas
56
Arjen van Heck

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

Il suffit de faire 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);

89
VisioN

Via Jquery: 

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

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

1
Razan Paul

Essayer

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

Cela se produit parce que vous l'appelez avant que DOM ne soit chargé. Tout d’abord, créez l’élément et ajoutez-y des attributs, puis, une fois chargé, appelez-le. Dans votre cas, cela devrait ressembler à ça:

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