将诗情画意的雨景幻化在屏幕之上，一幕幕动人心魄的JavaScript动画大秀即将上演！

前端

2023-11-20 06:55:49

将雨的诗情画意搬上屏幕：一个迷人的 JavaScript 动画大秀

引言

想象一下，在舒适的家中就能欣赏雨景的美好，不需要忍受潮湿和寒冷。这不再是梦想，因为它已经通过 JavaScript 和 CSS 的巧妙结合变成了现实。让我带你进入一个充满生机的动画世界，在那里，雨滴在屏幕上曼妙起舞，为你带来一场视觉盛宴。

动画原理

这个迷人的动画采用了一种简单而巧妙的原理。首先，创建一个画布元素，然后使用 JavaScript 在画布上绘制雨滴。每个雨滴都有自己独特的尺寸和位置，并且随着时间的推移而更新。为了增强真实感，CSS 赋予雨滴透明度和大小等视觉效果。

代码实现

以下是这个动画的代码实现：

// 创建画布元素
const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取画布上下文
const ctx = canvas.getContext('2d');

// 创建雨滴数组
const raindrops = [];

// 创建雨滴对象
class Raindrop {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
  }

  // 绘制雨滴
  draw() {
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }

  // 更新雨滴位置
  update() {
    this.y += this.size;

    if (this.y > canvas.height) {
      this.y = 0;
    }
  }
}

// 创建 100 个雨滴
for (let i = 0; i < 100; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const size = Math.random() * 5 + 1;
  const raindrop = new Raindrop(x, y, size);
  raindrops.push(raindrop);
}

// 动画循环
function animate() {
  requestAnimationFrame(animate);

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制雨滴
  for (let i = 0; i < raindrops.length; i++) {
    const raindrop = raindrops[i];
    raindrop.draw();
    raindrop.update();
  }
}

// 启动动画
animate();