粒子效果是前端开发中常见的动态视觉特效，通过大量微小粒子的运动、变化组合出丰富的视觉效果，广泛应用于网页背景、活动宣传页等场景。下面我们就来详细讲解如何在JavaScript中实现基础的粒子效果。
实现粒子效果的核心思路
要实现粒子效果，核心需要解决三个问题：一是定义单个粒子的属性和行为，二是通过画布批量绘制所有粒子，三是通过动画循环不断更新粒子的状态并重新绘制，形成动态效果。整个流程可以拆分为以下几个步骤：
- 初始化canvas画布，获取绘图上下文
- 定义粒子类，包含位置、速度、大小、颜色等属性
- 创建粒子数组，批量生成初始粒子
- 编写动画循环函数，更新每个粒子的状态并重新绘制
- 处理窗口尺寸变化等边界情况
基础粒子效果实现示例
下面是一个完整的基础粒子效果实现代码，粒子会在画布中随机运动，碰到边界后会反弹：
// 获取canvas元素和绘图上下文
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸为窗口大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
// 监听窗口尺寸变化，重新设置画布大小
window.addEventListener('resize', resizeCanvas);
// 定义粒子类
class Particle {
constructor() {
// 粒子初始位置随机
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
// 粒子速度随机，x和y方向速度在-2到2之间
this.vx = (Math.random() - 0.5) * 4;
this.vy = (Math.random() - 0.5) * 4;
// 粒子大小随机，1到3像素之间
this.size = Math.random() * 2 + 1;
// 粒子颜色随机，使用半透明的白色
this.color = `rgba(255, 255, 255, ${Math.random() * 0.5 + 0.5})`;
}
// 更新粒子状态
update() {
// 更新位置
this.x += this.vx;
this.y += this.vy;
// 边界碰撞检测，碰到边界反弹
if (this.x <= 0 || this.x >= canvas.width) {
this.vx = -this.vx;
}
if (this.y <= 0 || this.y >= canvas.height) {
this.vy = -this.vy;
}
}
// 绘制粒子
draw() {
ctx.beginPath();
// 绘制圆形粒子
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
// 粒子数量，根据画布大小调整，避免粒子过多
const particleCount = Math.floor((canvas.width * canvas.height) / 10000);
// 存储所有粒子的数组
const particles = [];
// 初始化粒子
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
// 动画循环函数
function animate() {
// 清除画布，使用半透明黑色实现拖尾效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 遍历所有粒子，更新并绘制
particles.forEach(particle => {
particle.update();
particle.draw();
});
// 请求下一帧动画
requestAnimationFrame(animate);
}
// 启动动画
animate();代码关键点说明
1. 画布初始化
首先通过getElementById获取canvas元素，调用getContext('2d')得到2D绘图上下文，后续所有绘制操作都通过这个上下文完成。画布尺寸需要设置为窗口大小，同时监听resize事件，避免窗口缩放后粒子效果出现偏移。
2. 粒子类设计
粒子类包含位置（x、y）、速度（vx、vy）、大小（size）、颜色（color）四个核心属性，同时提供update方法更新位置和处理边界碰撞，draw方法负责绘制单个粒子。每个粒子的属性都通过随机数生成，保证初始状态多样化。
3. 动画循环机制
这里使用requestAnimationFrame实现动画循环，它会在浏览器下一次重绘前调用指定的回调函数，比传统的setInterval更适合做动画，能避免掉帧问题，动画也更流畅。每一帧先清除画布，再更新所有粒子状态并重新绘制，就形成了连续的动态效果。
4. 拖尾效果实现
清除画布时没有使用完全不透明的黑色，而是使用了半透明的黑色rgba(0, 0, 0, 0.1)，这样每一帧清除后还会保留上一帧的部分痕迹，粒子运动过的地方会留下淡淡的轨迹，形成好看的拖尾效果。
效果扩展方向
上面的示例是基础版本，还可以根据需求扩展更多效果：比如给粒子之间添加连线，当两个粒子距离小于一定值时绘制连接线；或者让粒子跟随鼠标移动，鼠标经过时粒子产生避让效果；还可以调整粒子的颜色、大小变化规则，实现更丰富的视觉效果。
JavaScript粒子效果canvas动画requestAnimationFrame修改时间：2026-05-29 02:52:11