Background animato in JS con i canvas
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, 5);
Ecco la funzione per disegnare le stelle:
// Funzione per disegnare le stelle
function drawStars() {
for (let i = 0; i < stars.length; i++) {
const star = stars[i];
ctx.beginPath();
ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
ctx.fill();
}
}
Ecco la funzione per far muovere le stelle:
// Funzione per muovere le stelle
function moveStars() {
for (let i = 0; i < stars.length; i++) {
const star = stars[i];
star.x += star.speed;
if (star.x > canvas.width) {
star.x = 0;
}
}
}
La funzione per disegnare lo sfonfo:
// Funzione per disegnare lo sfondo
function drawSky() {
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, "#001f3f");
gradient.addColorStop(0.5, "#7FDBFF");
gradient.addColorStop(1, "#FF4136");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
La funzione per animare lo sfondo:
// Funzione per animare lo sfondo
function animate() {
requestAnimationFrame(animate);
drawSky();
moveStars();
drawStars();
}
animate();
Nel css inseriamo:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#myCanvas {
display: block;
margin: 0 auto;
border: 1px solid #ccc;
}
Nel codice html inseriamo:
<canvas id="myCanvas" width="800" height="600"></canvas>
Commenti recenti