当前位置：首页 > JavaScript

js实现雪花

2026-03-15 08:14:55JavaScript

实现雪花效果的方法

使用JavaScript和Canvas可以轻松实现雪花飘落的效果。以下是一个简单的实现方案：

js实现雪花

创建Canvas画布

在HTML中创建一个Canvas元素作为雪花飘落的舞台：

js实现雪花

<canvas id="snowCanvas"></canvas>

设置Canvas样式

确保Canvas填满整个屏幕：

#snowCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

JavaScript实现

const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');

// 调整Canvas尺寸以适应窗口
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

// 雪花类
class Snowflake {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height * -1;
    this.size = Math.random() * 3 + 2;
    this.speed = Math.random() * 1 + 0.5;
    this.opacity = Math.random() * 0.5 + 0.5;
    this.wind = Math.random() * 2 - 1;
  }

  update() {
    this.y += this.speed;
    this.x += this.wind;

    if (this.y > canvas.height) {
      this.y = Math.random() * canvas.height * -1;
      this.x = Math.random() * canvas.width;
    }
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
    ctx.fill();
  }
}

// 创建雪花数组
const snowflakes = Array(100).fill().map(() => new Snowflake());

// 动画循环
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  snowflakes.forEach(flake => {
    flake.update();
    flake.draw();
  });

  requestAnimationFrame(animate);
}

animate();