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>