Background animato in JS con i canvas

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

• ⏱️ 8 ore di corso registrato
• 🧩 Più di 50 algoritmi risolti passo passo
• 🎯 Livello base — da zero ad eroe
• 💻 100% online, fruibile quando vuoi

Prezzo€ 19,90

🅿️Acquista con PayPal — € 19,90

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:

📚 Consigliato per te

50 Algoritmi per imparare JavaScript

Una guida step by step per imparare JavaScript con esercizi svolti.

Vedi su Amazon

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