b.soussi-chiadmi/clubinfo-2024-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

canvas & requestanimationframe

Browse Source
This commit is contained in:
bach 2024-12-06 15:15:42 +01:00
parent cd00950b2c
commit 826c811e48
3 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
oop/index.html Normal file
View File

@ -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>

40
oop/script.js Normal file
View File

@ -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);

5
oop/styles.css Normal file
View File

@ -0,0 +1,5 @@
body{
margin: 0;
width:100vw;
height:100vh;
}