运用代码，让背景飘下浪漫的代码雨

2023-10-23 02:02:57

飘落的代码雨

一个简单的代码雨效果可以通过以下步骤实现：

创建一个新的 HTML 文件。
在 HTML 文件中，添加一个 <canvas> 元素。
在 <canvas> 元素中，添加以下 JavaScript 代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 定义代码雨滴的类
class Raindrop {
  constructor(x, y, speed) {
    this.x = x;
    this.y = y;
    this.speed = speed;
  }

  // 绘制代码雨滴
  draw() {
    ctx.fillStyle = "green";
    ctx.fillRect(this.x, this.y, 1, 10);
  }

  // 更新代码雨滴的位置
  update() {
    this.y += this.speed;

    // 如果代码雨滴超出画布范围，则将其重置到画布顶部
    if (this.y > canvas.height) {
      this.y = 0;
    }
  }
}

// 创建一个代码雨滴数组
var raindrops = [];

// 创建 100 个代码雨滴
for (var i = 0; i < 100; i++) {
  // 随机生成代码雨滴的初始位置和速度
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;
  var speed = Math.random() * 5 + 1;

  // 创建一个新的代码雨滴并将其添加到数组中
  var raindrop = new Raindrop(x, y, speed);
  raindrops.push(raindrop);
}

// 定义动画循环函数
function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制代码雨滴
  for (var i = 0; i < raindrops.length; i++) {
    raindrops[i].draw();
  }

  // 更新代码雨滴的位置
  for (var i = 0; i < raindrops.length; i++) {
    raindrops[i].update();
  }

  // 请求下一次动画帧
  requestAnimationFrame(animate);
}

// 启动动画循环
animate();

这个脚本首先定义了一个 Raindrop 类，该类代表代码雨滴。然后，它创建一个代码雨滴数组，并为数组添加 100 个代码雨滴。接着，它定义了一个动画循环函数 animate()，该函数不断地清除画布、绘制代码雨滴并更新代码雨滴的位置。最后，它调用 requestAnimationFrame() 函数启动动画循环。