Canvas: cercles qui bougent

charline159 Messages postés 216 Statut Membre -  
 Utilisateur anonyme -
Bonjour! A partir du canvas, j'essaie de générer un ensemble de cercles qui sont censés se déplacer. Cependant, aucun cercle n'est généré sur ma page.

La console ne m'affiche aucune erreur, donc je ne vois pas d'où cela vient. J'ai relu mon code, mais je ne vois pas non plus ce qui pourrait clocher. Auriez-vous une idée?

Voilà le code:

html 
<!DOCTYPE html>
<html>

 <head>
  <title>Test web</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="page6style.css" />
      <link rel="stylesheet" href="navstyle.css" />
 </head>
  
  <body>
    
    <canvas></canvas>
   

    <script src="page6script.js"></script>
  </body>

</html>


css 
canvas{
 border: 5px solid orange; 
}


javascript 
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.height = (window.innerHeight)*80/100;
canvas.width = (window.innerWidth)*80/100;


// coordonates
var x, y, dx, dy, radius;

// generate Circle
function Circle(){

 this.x = Math.random()*innerWidth;
 this.y = Math.random()*innerHeight;
 this.dx = (Math.random()-0.5)*7;
 this.dy = (Math.random()-0.5)*7;
 this.radius = Math.random()*30;

 // anonymous function nameless to create circle
 this.draw = function(){
  ctx.beginPath();
  ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
  ctx.strokeStyle = "blue";
  ctx.stroke(); 
 }
}



// generate set of circles
var circleArray = [];

function setOfCircles(){
 for(var i = 0; i < 100; i++){
  circleArray.push(new Circle());
 }
}



// make circle move
function animate(){

 requestAnimationFrame(animate);
 ctx.clearRect(0,0,innerWidth,innerHeight);

 for (var i = 0; i<circleArray.length ; i++){
  
  // anonymous function nameless to make circle move
  circleArray[i].update = function(){
   if ((this.x+this.radius>innerWidth*80/100) || (this.x-this.radius<0)){
    this.dx = -this.dx;
   }

   if ((this.y+this.radius>innerHeight*80/100) || (this.y-this.radius<0)){
    this.dy = -this.dy;
   }
   this.x += this.dx;
   this.y += this.dy;
  }

 }//end for
}



// final result
setOfCircles();
animate();
A voir également:

3 réponses

Réponse 1 / 3
Totoax
 
Salut,
setOfCircles();
devrait être dans l'animation sinon il n'y a que les calculs de postions qui sont mis à jour(et l'effacement par clearRect).
en tout cas le dessin des cercles n'est pas dans la boucle il me semble.
1
Réponse 2 / 3
charline159 Messages postés 216 Statut Membre 1
 
Merci à toi, je vais arranger ça :)
0
Réponse 3 / 3
Utilisateur anonyme
 
Bonjour,

Les fonctions update() et draw() ne sont jamais appelées. Il faut les inclure dans animate() avant de fermer le for : 

     circleArray[i].draw();
     circleArray[i].update();
}//end for
0

Discussions similaires

Canvas.drawImage
magneto -
magneto -

4 réponses
Fonction rotate tkinter python
ol3256457 -
mamiemando -

4 réponses
Chronomètre dans un canvas
parousky -
Utilisateur anonyme -

1 réponse
WPF Superposition de CANVAS
robunccm -
Utilisateur anonyme -

10 réponses
suite saint seiya the lost canvas ??
viper6666 -
pit -

3 réponses