当前位置：首页 > JavaScript

js实现花瓣飘落

2026-02-02 13:17:16JavaScript

实现花瓣飘落效果

使用JavaScript实现花瓣飘落效果可以通过HTML5的Canvas或CSS动画结合JavaScript来完成。以下是两种常见的方法：

使用Canvas实现花瓣飘落

Canvas适合处理大量动态图形，性能较好。以下是一个简单的实现示例：

js实现花瓣飘落

const canvas = document.getElementById('petalCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Petal {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * -200;
    this.size = Math.random() * 15 + 5;
    this.speed = Math.random() * 2 + 1;
    this.angle = Math.random() * 360;
    this.spin = Math.random() < 0.5 ? -1 : 1;
    this.spinSpeed = Math.random() * 2 + 0.5;
  }

  update() {
    this.y += this.speed;
    this.angle += this.spin * this.spinSpeed;
    if (this.y > canvas.height) {
      this.y = Math.random() * -200;
      this.x = Math.random() * canvas.width;
    }
  }

  draw() {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle * Math.PI / 180);
    ctx.fillStyle = `hsl(${Math.random() * 60 + 300}, 70%, 70%)`;
    ctx.beginPath();
    ctx.ellipse(0, 0, this.size, this.size * 0.6, 0, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
}

const petals = [];
for (let i = 0; i < 50; i++) {
  petals.push(new Petal());
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  petals.forEach(petal => {
    petal.update();
    petal.draw();
  });
  requestAnimationFrame(animate);
}

animate();

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

HTML部分需要添加一个Canvas元素：

<canvas id="petalCanvas"></canvas>

使用CSS和JavaScript实现花瓣飘落

这种方法更适合简单的应用场景，性能不如Canvas但实现更简单：

js实现花瓣飘落

document.addEventListener('DOMContentLoaded', () => {
  const container = document.body;

  function createPetal() {
    const petal = document.createElement('div');
    petal.className = 'petal';

    const size = Math.random() * 15 + 5;
    petal.style.width = `${size}px`;
    petal.style.height = `${size * 0.6}px`;
    petal.style.left = `${Math.random() * 100}vw`;
    petal.style.top = `-20px`;
    petal.style.animationDuration = `${Math.random() * 5 + 5}s`;
    petal.style.animationDelay = `${Math.random() * 2}s`;
    petal.style.opacity = Math.random() * 0.5 + 0.5;
    petal.style.backgroundColor = `hsl(${Math.random() * 60 + 300}, 70%, 70%)`;

    container.appendChild(petal);

    petal.addEventListener('animationend', () => {
      petal.remove();
      createPetal();
    });
  }

  for (let i = 0; i < 30; i++) {
    createPetal();
  }
});

CSS样式需要添加：

.petal {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  animation: fall linear infinite;
  transform-origin: center;
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
  }
}