canvas & requestanimationframe

2024-12-06 15:15:42 +01:00 · 2024-12-06 15:15:42 +01:00 · 826c811e48
commit 826c811e48
parent cd00950b2c
3 changed files with 59 additions and 0 deletions
--- a/oop/index.html
+++ b/oop/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <canvas id="scene"></canvas> 
+
+  <script src="script.js"></script>
+</body>
+</html>
--- a/oop/script.js
+++ b/oop/script.js
@ -0,0 +1,40 @@
+let canvas = document.querySelector('#scene');
+
+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
+function degToRad(deg) {
+  return deg * (Math.PI / 180.0);
+}
+
+// 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++) {
+  
+// }
+
+let pos = {
+  x:50,
+  y:50
+}
+
+let monAnime = function(){
+  // pos.x = pos.x +1;
+  // pos.x += 1;
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  
+  pos.x++;
+  ctx.beginPath();
+  ctx.arc(pos.x, pos.y, 20, 0, degToRad(360));
+  ctx.stroke();
+
+  window.requestAnimationFrame(monAnime);
+}
+
+
+window.requestAnimationFrame(monAnime);
--- a/oop/styles.css
+++ b/oop/styles.css
@ -0,0 +1,5 @@
+body{
+  margin: 0;
+  width:100vw;
+  height:100vh;
+}