canvas & requestanimationframe MORE

oop/script.js

@@ -4,7 +4,6 @@ canvas.width = document.body.clientWidth;
 canvas.height = document.body.clientHeight;
 
 let ctx = canvas.getContext('2d');
-
 // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle
 
 // les fonctions
@@ -13,28 +12,32 @@ function degToRad(deg) {
 }
 
 // les animations
-// une loop ne peut pas focntionner car l'image ne se rafraîchit pas entre les iteration de boucle
-// for (let index = 0; index < array.length; index++) {
-  
+// une loop ne peut pas fonctionner car l'image ne se rafraîchit pas entre les iteration de boucle
+// for (let index = 0; index < array.length; index++) {  
 // }
 
 let pos = {
   x:50,
-  y:50
+  y:50,
+  r: 20,
+  a: 0
 }
 
 let monAnime = function(){
-  // pos.x = pos.x +1;
-  // pos.x += 1;
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
   
-  pos.x++;
+  // pos.x = pos.x +1;
+  pos.x += 2;
+  // pos.x++;
+  // pos.r++;
+  pos.a++;
   ctx.beginPath();
-  ctx.arc(pos.x, pos.y, 20, 0, degToRad(360));
+  ctx.arc(pos.x, pos.y, pos.r, degToRad(pos.a), degToRad(pos.a+180));
   ctx.stroke();
 
+  // on relance la fonction a la prochaine frame
   window.requestAnimationFrame(monAnime);
 }
 
 
-window.requestAnimationFrame(monAnime);
+monAnime();