HTML5 Créer dynamiquement un canevas

Question

HTML5 Créer dynamiquement un canevas

Demandé el 18 de Mai, 2012: Quand la question a-t-elle été
177901 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Bonjour J'ai une question concernant la création dynamique d'un canevas à l'aide de javascript.

Je crée un canevas comme suit :

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 le message suivant null valeur :

cursorLayer = document.getElementById("CursorLayer");

Est-ce que je m'y prends mal ? Existe-t-il une meilleure façon de créer un canevas à l'aide de JavaScript ?

Demandé el 18 de Mai, 2012 par Arjen van Heck

Answer 1

5 Réponses

Answer 2

136voto

VisioN Points 62518

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

Il suffit de procéder comme 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);

Répondu el 18 de Mai, 2012 par VisioN (62518 Points )

Answer 3

1voto

Blizzard Points 141

Via Jquery :

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

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

Répondu el 17 de Juillet, 2015 par Blizzard (141 Points )

Answer 4

1voto

goblin01 Points 63

Cela se produit parce que vous l'appelez avant que le DOM ne soit chargé. Tout d'abord, créez l'élément et ajoutez-lui des attributs, puis appelez-le après le chargement du DOM. Dans votre cas, cela devrait ressembler à cela :

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

Répondu el 2 de Mars, 2018 par goblin01 (63 Points )

Answer 5

0voto

Kamil Kiełczewski Points 6496

Alternative

Utiliser l'élément .innerHTML= qui est assez rapide dans les navigateurs modernes

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

// TEST

var ctx = CursorLayer.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 50, 50);

canvas { border: 1px solid black }

Répondu el 29 de Mai, 2019 par Kamil Kiełczewski (6496 Points )

Answer 6

0voto

Pooja Points 11

 <html>
 <head></head>
 <body>
 <canvas id="canvas" width="300" height="300"></canvas>
 <script>
  var sun = new Image();
  var moon = new Image();
  var earth = new Image();
  function init() {
  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
  window.requestAnimationFrame(draw);
  }

  function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0, 0, 300, 300);

  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
  ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
  ctx.save();
  ctx.translate(150, 150);

  // Earth
  var time = new Date();
  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * 
  time.getMilliseconds());
  ctx.translate(105, 0);
  ctx.fillRect(10, -19, 55, 31); 
  ctx.drawImage(earth, -12, -12);

   // Moon
  ctx.save();
  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * 
  time.getMilliseconds());
  ctx.translate(0, 28.5);
  ctx.drawImage(moon, -3.5, -3.5);
  ctx.restore();

  ctx.restore();

   ctx.beginPath();
   ctx.arc(150, 150, 105, 0, Math.PI * 2, false);
   ctx.stroke();

   ctx.drawImage(sun, 0, 0, 300, 300);

   window.requestAnimationFrame(draw);
    }

   init();
   </script>
   </body>
   </html>

Répondu el 21 de Novembre, 2019 par Pooja (11 Points )

HTML5 Créer dynamiquement un canevas

Réponses

Alternative

Questions en vedette

Top Tags

Prograide.com

Powered by:

HTML5 Créer dynamiquement un canevas

Réponses

Alternative

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: