Canvas: cercles qui bougent

charline159 Messages postés 208 Date d'inscription Statut Membre Dernière intervention -
Utilisateur anonyme - 14 févr. 2021 à 16:02

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:

Canvas: cercles qui bougent
Canvas gratuit - Télécharger - Divers Photo & Graphisme
Gemini canvas - Guide
Project canvas - Télécharger - Études & Formations
3d canvas - Télécharger - 3D
Animation via Canvas qui ne s'affiche pas - Forum Javascript

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.

Réponse 2 / 3

charline159 Messages postés 208 Date d'inscription Statut Membre Dernière intervention 1

Merci à toi, je vais arranger ça :)

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

Discussions similaires

Canvas.drawImage

Fonction rotate tkinter python

Chronomètre dans un canvas

WPF Superposition de CANVAS

suite saint seiya the lost canvas ??

Votre réponse

Discussions similaires