bsc/clubinfo-2024-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

canvas & requestanimationframe MORE

Browse Source
This commit is contained in:
bach 2024-12-06 15:52:07 +01:00
parent 826c811e48
commit e29a2b96c1
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
oop/script.js
View File

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