43 lines
936 B
JavaScript
43 lines
936 B
JavaScript
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 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,
|
|
r: 20,
|
|
a: 0
|
|
}
|
|
|
|
let monAnime = function(){
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// pos.x = pos.x +1;
|
|
pos.x += 2;
|
|
// pos.x++;
|
|
// pos.r++;
|
|
pos.a++;
|
|
ctx.beginPath();
|
|
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);
|
|
}
|
|
|
|
|
|
monAnime(); |