From 826c811e48814573e65983f880a9dfad28ce4256 Mon Sep 17 00:00:00 2001 From: bach Date: Fri, 6 Dec 2024 15:15:42 +0100 Subject: [PATCH] canvas & requestanimationframe --- oop/index.html | 14 ++++++++++++++ oop/script.js | 40 ++++++++++++++++++++++++++++++++++++++++ oop/styles.css | 5 +++++ 3 files changed, 59 insertions(+) create mode 100644 oop/index.html create mode 100644 oop/script.js create mode 100644 oop/styles.css diff --git a/oop/index.html b/oop/index.html new file mode 100644 index 0000000..2edec63 --- /dev/null +++ b/oop/index.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/oop/script.js b/oop/script.js new file mode 100644 index 0000000..cc2af64 --- /dev/null +++ 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); \ No newline at end of file diff --git a/oop/styles.css b/oop/styles.css new file mode 100644 index 0000000..9b36ab8 --- /dev/null +++ b/oop/styles.css @@ -0,0 +1,5 @@ +body{ + margin: 0; + width:100vw; + height:100vh; +} \ No newline at end of file