使用HTML5 Canvas 实现呼吸粒子球动画效果的原理

在网页开发领域，动画效果能够极大地提升用户体验，让页面变得更加生动有趣。今天，我们深入剖析一个基于 HTML5 Canvas 的 3D 粒子动画 —— 呼吸粒子球。通过详细解读其代码实现，我们将全面了解如何运用 HTML5 的强大功能构建出如此迷人的视觉效果。
效果展示：

用 HTML5 Canvas 和 JavaScript 实现粒子恒星脉动特效

1，整体架构

整个呼吸粒子球效果是 HTML、CSS 和 JavaScript 协同工作的成果。HTML 搭建基础页面结构，CSS 负责样式与背景设置，而 JavaScript 则实现核心动画逻辑。

1.1，HTML结构

<!DOCTYPE html>
<html>
<head>
    <title>呼吸粒子球</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: radial-gradient(circle at center, #1a1a2e 0%, #16213e 50%, #0f172a 100%);
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // 动画相关的JavaScript代码
    </script>
</body>
</html>

在 HTML 部分，我们创建了一个canvas元素，它是动画的绘制区域。通过 CSS 设置页面背景为径向渐变，营造深邃空间感，同时将canvas设为块级元素并使其充满整个页面，保证动画能全屏展示。

1.2，JavaScript初始化

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

// 设置canvas尺寸为全屏
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

JavaScript 代码首先获取canvas元素，通过getContext(‘2d’)获取 2D 绘图上下文。然后将canvas尺寸设置为当前窗口的宽高，确保动画全屏显示。

2、粒子类的实现

粒子是构成呼吸粒子球的基本元素，通过定义Particle类来管理每个粒子的属性和行为。

2.1，粒子属性初始化

class Particle {
    constructor() {
        this.x = 0;
        this.y = 0;
        this.z = 0;
        this.radius = Math.random() * 1.2 + 0.3;
        this.theta = Math.random() * Math.PI * 2;
        this.phi = Math.acos((Math.random() * 2) - 1);
        this.baseR = 200;
        this.speed = Math.random() * 0.001 + 0.0005;
        // 根据深度设置颜色
        this.baseColor = {
            r: Math.random() * 100 + 155,
            g: Math.random() * 100 + 155,
            b: 255
        };
    }

在Particle类的构造函数中：

x、y、z表示粒子在三维空间中的位置，初始值为 0 ，后续会在动画过程中更新。
radius是粒子半径，通过Math.random()函数生成一个随机小数，再乘以 1.2 并加上 0.3，这样粒子半径范围在 0.3 到
1.5 之间，使得粒子大小呈现多样化。
theta和phi是将三维空间点转换为笛卡尔坐标的角度值。theta通过Math.random()生成一个 0（包括）到 2 *
Math.PI（不包括）之间的随机数，决定粒子在水平方向上的旋转角度；phi通过Math.acos((Math.random() * 2)- 1)生成，Math.random()生成 0（包括）到 1（不包括）之间的随机数，乘以 2 再减 1 得到 - 1（包括）到 1（不包括）之间的值，然后通过Math.acos函数得到 0（包括）到Math.PI（不包括）之间的角度，决定粒子在垂直方向上的角度，确保粒子在球面上均匀分布。
baseR是粒子围绕的基准半径，值为 200，用于控制粒子整体分布范围，所有粒子大致围绕这个半径形成一个球体。
speed是粒子旋转速度，通过Math.random()生成随机小数，乘以 0.001 再加上 0.0005，速度范围在 0.0005 到
0.0015 之间，使粒子运动速度有差异。
baseColor是粒子基础颜色，红色和绿色分量通过Math.random()生成随机数，范围在 155 到 255 之间，蓝色分量固定为
255，从而创建出不同蓝色调的粒子。

2.2，粒子位置更新

update(breathe) {
    this.theta += this.speed;
    const r = this.baseR * (1 + breathe * 0.2);
    this.x = r * Math.sin(this.phi) * Math.cos(this.theta);
    this.y = r * Math.sin(this.phi) * Math.sin(this.theta);
    this.z = r * Math.cos(this.phi);
}

update方法用于更新粒子位置。breathe参数控制粒子球呼吸效果，它是通过Math.sin函数生成的在 -1 到 1 之间波动的值。随着时间推移，theta不断增加（增加量为this.speed），使粒子围绕球体中心旋转。r的值根据breathe调整，breathe为正时，r增大，粒子向外扩张；breathe为负时，r减小，粒子向内收缩，实现粒子球缩放效果。最后通过三角函数将极坐标转换为笛卡尔坐标，更新粒子的x、y、z位置。

2.3，粒子绘制

draw() {
    // 增强透视效果
    const perspective = 800;
    const scale = perspective / (perspective + this.z);
    const x2d = canvas.width/2 + this.x * scale;
    const y2d = canvas.height/2 + this.y * scale;

    // 根据深度调整颜色和大小
    const depth = (this.z + this.baseR) / (this.baseR * 2);
    const alpha = 0.8 + (depth * 0.2);
    const radiusScale = this.radius * scale * (0.8 + depth * 0.4);

    // 计算深度相关的颜色
    const depthFactor = 0.3 + depth * 0.7;
    const color = {
        r: this.baseColor.r * depthFactor,
        g: this.baseColor.g * depthFactor,
        b: this.baseColor.b * depthFactor
    };

    ctx.beginPath();
    ctx.arc(x2d, y2d, radiusScale, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
    ctx.fill();

    // 为前景粒子添加发光效果
    if (depth > 0.8) {
        ctx.shadowBlur = 5;
        ctx.shadowColor = `rgba(${color.r}, ${color.g}, ${color.b}, 0.5)`;
    } else {
        ctx.shadowBlur = 0;
    }
}

draw方法负责将粒子绘制到canvas上。首先，通过透视变换公式计算粒子在 2D 画布上的位置x2d和y2d。这里perspective值设为 800，它模拟人眼到屏幕的距离，scale通过perspective / (perspective + this.z)计算得出，z值越大（粒子越远），scale越小，实现近大远小的透视效果。x2d和y2d通过画布中心坐标加上this.x和this.y乘以scale得到，确定粒子在画布上的实际绘制位置。
然后，根据粒子深度depth调整粒子透明度alpha、半径缩放radiusScale以及颜色。depth通过(this.z + this.baseR) / (this.baseR * 2)计算，范围在 0 到 1 之间，越接近 1 表示粒子越靠近观察者。alpha从 0.8 开始，随着depth增加而增大，使远处粒子更透明；radiusScale不仅考虑了scale，还根据depth进一步缩放，让近处粒子更大；depthFactor用于调整颜色，使近处粒子颜色更鲜艳。
最后，使用ctx.arc方法绘制粒子，并根据depth判断是否为粒子添加发光效果。当depth > 0.8时，为粒子添加模糊半径为 5、颜色为当前粒子颜色半透明的阴影，增强视觉层次感。

3、动画循环与管理

3.1，粒子数组创建与初始化

const particles = [];
const particleCount = 1500;
for(let i = 0; i < particleCount; i++) {
    particles.push(new Particle());
}

这里创建了一个包含 1500 个粒子的数组particles，通过循环实例化每个粒子并添加到数组中，这些粒子将共同构成呼吸粒子球。

3.2，动画循环函数

let time = 0;
function animate() {
    // 使用渐变背景增强深度感
    ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 按照z轴深度排序粒子
    particles.sort((a, b) => b.z - a.z);

    const breathe = Math.sin(time * 0.01);

    // 更新和绘制所有粒子
    particles.forEach(particle => {
        particle.update(breathe);
        particle.draw();
    });

    time++;
    requestAnimationFrame(animate);
}

animate();

animate函数是动画的核心循环。每次循环：

首先使用ctx.fillRect方法填充一个半透明黑色背景（rgba(0, 0, 0,
0.3)），模拟深度感并清除上一帧绘制内容，为新的一帧绘制做准备。
然后对粒子数组按z轴深度排序，particles.sort((a, b) => b.z -
a.z)确保距离观察者近的粒子在上面绘制，实现正确遮挡效果，符合现实中物体的遮挡逻辑。
通过Math.sin(time * 0.01)计算breathe的值，time每次循环自增 1，time *0.01作为Math.sin函数的参数，使breathe的值在 -1 到 1 之间周期性变化，控制粒子球呼吸节奏。
遍历粒子数组，依次调用每个粒子的update和draw方法，更新粒子位置并绘制到画布上，让每个粒子都能按照设定的逻辑进行运动和显示。
最后，time自增，并使用requestAnimationFrame方法请求浏览器在下一次重绘前调用animate函数，该方法会根据浏览器的刷新频率来优化动画性能，实现流畅动画效果，通常浏览器刷新频率为60Hz，即每秒 60 帧。

3.3，窗口大小响应

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

为确保动画在不同窗口大小下正常显示，添加窗口大小变化监听器。当窗口大小改变时，重新设置canvas的宽度和高度为当前窗口的宽高，使动画始终适应屏幕尺寸，保证用户在不同设备和窗口状态下都能获得良好的视觉体验。

4、总结

通过对呼吸粒子球动画效果实现原理的详细分析，我们清晰看到如何利用 HTML5 Canvas 的 2D 绘图功能，结合 JavaScript 的数学计算和动画控制，创建出具有立体感和动态效果的粒子动画。从粒子属性初始化、位置更新、绘制，到动画循环管理以及窗口大小响应，每个环节紧密配合，共同打造出迷人的呼吸粒子球效果。希望本文能助您更好地理解和运用 HTML5 Canvas 进行动画开发，为网页增添更多精彩视觉效果。

完整的源码获取、技术问题讨论，请大家在评论区留言！