零基础也能学会！粒子化星空特效制作教程

前端

2023-11-20 20:53:09

打造迷幻的粒子化星空特效：分步指南

粒子化星空：数字魔法

粒子化星空特效是一种令人惊叹的视觉效果，它通过模拟成千上万的微小粒子在夜空中闪烁，创造出一个迷人的星空环境。这种效果在网站背景、游戏背景、动画和其他创意项目中广泛应用，让观众仿佛置身于浩瀚无垠的宇宙之中。

踏上粒子化星空之旅

打造粒子化星空特效并不复杂，只要按照以下步骤操作即可：

1. 准备工具

文本编辑器
浏览器
粒子化星空代码（可在网上获取）

2. 创建 HTML 文件

创建一个名为 "粒子化星空.html" 的新 HTML 文件，并包含以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="粒子化星空.js"></script>
</body>
</html>

3. 添加 CSS 样式

在 HTML 文件中添加以下 CSS 样式：

body {
    background-color: #000;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

4. 创建 JavaScript 脚本

在 HTML 文件中添加以下 JavaScript 脚本：

// 获取 canvas 元素
var canvas = document.getElementById('canvas');

// 获取 canvas 的上下文
var ctx = canvas.getContext('2d');

// 设置 canvas 的宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建粒子数组
var particles = [];

// 创建粒子
for (var i = 0; i < 100; i++) {
    var particle = new Particle();
    particles.push(particle);
}

// 更新粒子
function updateParticles() {
    for (var i = 0; i < particles.length; i++) {
        particles[i].update();
    }
}

// 绘制粒子
function drawParticles() {
    for (var i = 0; i < particles.length; i++) {
        particles[i].draw();
    }
}

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

// 启动动画
animate();

// 粒子类
function Particle() {
    // 粒子的位置
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;

    // 粒子的速度
    this.vx = Math.random() * 2 - 1;
    this.vy = Math.random() * 2 - 1;

    // 粒子的半径
    this.radius = Math.random() * 2 + 1;

    // 粒子的颜色
    this.color = 'white';
}

// 更新粒子
Particle.prototype.update = function() {
    // 更新粒子的位置
    this.x += this.vx;
    this.y += this.vy;

    // 如果粒子超出 canvas 的边界，则将其位置重置到 canvas 内
    if (this.x < 0 || this.x > canvas.width) {
        this.vx = -this.vx;
    }
    if (this.y < 0 || this.y > canvas.height) {
        this.vy = -this.vy;
    }
};

// 绘制粒子
Particle.prototype.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
};