master

分支 (1)

管理

管理

master

canvas-learning-notes
/
雪花飘落.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Snowfall with Canvas</title>
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #2c3e50;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="snowCanvas" width="800" height="600"></canvas>

    <script>
      const canvas = document.getElementById("snowCanvas");
      const ctx = canvas.getContext("2d");

      class Snowflake {
        constructor() {
          this.x = Math.random() * canvas.width;
          this.y = Math.random() * canvas.height;
          this.size = Math.random() * 3 + 2; // Snowflake sizes between 2 and 5
          this.speed = Math.random() * 1 + 0.5; // Falling speeds
        }
        update() {
          this.y += this.speed;
          if (this.y > canvas.height) {
            this.y = 0;
          }
        }
        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = "white";
          ctx.fill();
        }
      }

      const snowflakes = [];
      for (let i = 0; i < 200; i++) {
        snowflakes.push(new Snowflake());
      }

      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        snowflakes.forEach((snowflake) => {
          snowflake.update();
          snowflake.draw();
        });
        requestAnimationFrame(animate);
      }
      animate();
    </script>
  </body>
</html>