Canvas: cercles qui bougent
charline159
Messages postés
216
Statut
Membre
-
Utilisateur anonyme -
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
css
javascript
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
- Saint seiya the lost canvas streaming - Forum Cinéma / Télé
