星空，总是让人向往和沉醉。在电脑屏幕上重现这一美景，无疑是一项有趣且富有挑战性的任务。今天，我们就来探讨如何使用JavaScript和HTML5 Canvas API来打造绚丽流星雨效果。

准备工作

首先，确保你的环境中已经安装了Node.js和npm。然后，按照以下步骤创建一个新的项目：

  1. 在终端中运行以下命令创建项目目录：

    mkdir meteor-shower
cd meteor-shower

  2. 初始化npm项目：

    npm init -y

  3. 安装所需的库：

    npm install express canvas

  4. 在项目根目录下创建一个名为 index.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meteor Shower</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="app.js"></script>
</body>
</html>
  1. 在项目根目录下创建一个名为 app.js 的文件，并编写流星雨效果的代码。

流星雨效果实现

以下是流星雨效果的实现步骤：

  1. 初始化画布和上下文：首先，我们需要获取画布元素，并为其创建一个2D渲染上下文。

  2. 创建流星类：定义一个 Meteor 类，它将负责创建、更新和绘制流星。

  3. 生成流星：在 Meteor 类中，使用随机参数生成流星的位置、速度、大小和颜色。

  4. 绘制流星：使用 canvas 的 beginPath、moveTo、lineTo 和 stroke 方法绘制流星。

  5. 更新流星：在动画循环中，更新流星的位置，并判断是否需要重新生成流星。

  6. 动画循环：使用 requestAnimationFrame 创建一个无限循环，不断更新和绘制流星。

下面是 app.js 的完整代码：

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Meteor {
    constructor(x, y, velocity, color) {
        this.x = x;
        this.y = y;
        this.velocity = velocity;
        this.color = color;
        this.size = Math.random() * 5 + 1;
    }

    draw() {
        ctx.beginPath();
        ctx.moveTo(this.x, this.y);
        ctx.lineTo(this.x + this.velocity.x, this.y + this.velocity.y);
        ctx.strokeStyle = this.color;
        ctx.lineWidth = this.size;
        ctx.stroke();
    }

    update() {
        this.x += this.velocity.x;
        this.y += this.velocity.y;
        this.velocity.y += 0.02; // gravity effect
    }
}

const meteors = [];

function createMeteor() {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const velocity = {
        x: (Math.random() - 0.5) * 4,
        y: (Math.random() - 0.5) * 4
    };
    const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    meteors.push(new Meteor(x, y, velocity, color));
}

function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    meteors.forEach((meteor, index) => {
        meteor.draw();
        meteor.update();

        if (meteor.y > canvas.height) {
            meteors.splice(index, 1);
        }
    });

    createMeteor();

    requestAnimationFrame(animate);
}

animate();

现在，打开 index.html 文件，你将看到电脑屏幕上绽放的绚丽流星雨效果。你可以调整代码中的参数，例如流星的颜色、速度和大小，来打造出更加个性化的流星雨效果。