Background animato in JS con i canvas
Corsi registrati su
C, C++, Python, JavaScript Corsi in diretta per la formazione di Front End Developer e Back End Developer
In questo esempio creiamo un Background animato in JS con i canvas.
Abbiamo creato una funzione createStars() per generare le stelle, una funzione drawStars() per disegnarle, una funzione moveStars() per muoverle e una funzione drawSky() per disegnare lo sfondo. Infine, abbiamo utilizzato la funzione animate() per animare l’intero sfondo.
Possiamo sviluppare l’esercizio in tantissimi altri modi io vi propongo una possibile soluzione. Scrivete nei commetni la vostra soluzione!
Ecco dunque una possibile implementazione della funzione per creare le stelle, createStars():
const canvas = document.getElementById(“myCanvas”); const ctx = canvas.getContext(“2d”); // Funzione per generare un numero casuale all’interno di un intervallo function randomInRange(min, max) { return Math.random() * (max – min) + min; } //Funzione per creare le stelle function createStars(numStars, speed, maxSize) { const stars = []; for (let i = 0; i < numStars; i++) { stars.push({ x: randomInRange(0, canvas.width), y: randomInRange(0, canvas.height), size: randomInRange(1, maxSize), speed: randomInRange(speed / 2, speed), opacity: randomInRange(0.1, 1), }); } return stars; } const stars = createStars(200, 10,
Continua la lettura su: https://www.codingcreativo.it/background-animato-in-js-con-i-canvas/ Autore del post: Coding Creativo Fonte: https://www.codingcreativo.it
