从零开始：用Canvas打造动态粒子背景的完整指南
在现代网页设计中，动态粒子背景已成为吸引用户眼球的重要手段。无论是登录页面、产品展示页还是个人博客，一个流畅的粒子动画都能瞬间提升视觉层次感。本文将手把手教你用原生HTML5 Canvas实现一个可自定义的粒子系统，无需任何第三方库，全程仅需400行代码。
准备工作：理解Canvas基础
Canvas是HTML5新增的画布元素，它通过JavaScript在网页上绘制图形。首先，我们需要在页面中创建一个画布并获取其上下文对象。注意，粒子特效的关键在于requestAnimationFrame循环机制，它比传统的setInterval更高效，能自动匹配屏幕刷新率。
以下是基础初始化代码：
<canvas id="particleCanvas"></canvas>
<script>
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
</script>
第一步：定义粒子对象
每个粒子需要具备位置、速度、半径和透明度等属性。我们将创建一个Particle类来管理这些属性。位置用x和y坐标表示，速度使用dx和dy分量来控制移动方向。为了让运动更自然，可以加入随机偏移量。
class Particle {
constructor() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.dx = (Math.random() - 0.5) * 0.5;
this.dy = (Math.random() - 0.5) * 0.5;
this.radius = Math.random() * 3 + 1;
this.opacity = Math.random() * 0.5 + 0.2;
}
}
第二步：绘制粒子
绘制粒子使用arc方法绘制圆形。为了实现柔和的光晕效果，我们通过shadowBlur属性添加阴影。在绘制前必须调用ctx.clearRect清除前一帧内容，否则会形成拖尾效果——如果你想要流星拖尾，可以故意省略这一步。
function drawParticle(p) {
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${p.opacity})`;
ctx.shadowColor = '#00aaff';
ctx.shadowBlur = 15;
ctx.fill();
ctx.shadowBlur = 0; // 重置阴影避免性能损耗
}
第三步：更新粒子位置
每帧更新粒子的坐标，并处理边界碰撞。当粒子移出画布时，我们将其重新从另一侧出现，这样可以保持画面中粒子数量恒定。另外可以添加鼠标交互——当鼠标靠近时，粒子会被排斥开，增加趣味性。
function updateParticle(p, mouseX, mouseY) {
p.x += p.dx;
p.y += p.dy;
if (p.x < 0 || p.x > width) p.dx *= -1;
if (p.y < 0 || p.y > height) p.dy *= -1;
// 鼠标排斥效果
const dx = p.x - mouseX;
const dy = p.y - mouseY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
const angle = Math.atan2(dy, dx);
p.x += Math.cos(angle) * 2;
p.y += Math.sin(angle) * 2;
}
}
第四步：粒子连线效果
这是粒子背景最迷人的地方：当粒子距离小于设定阈值时，用半透明直线连接它们。为了性能优化，我们只遍历前一半粒子与后一半粒子做比较，避免O(n²)的全量计算。
function drawLines(particles) {
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 120) {
const opacity = (1 - dist / 120) * 0.6;
ctx.beginPath();
ctx.strokeStyle = `rgba(150, 200, 255, ${opacity})`;
ctx.lineWidth = 1;
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
}
第五步：组装动画循环
将所有逻辑整合进主循环中。注意requestAnimationFrame的回调函数要使用箭头函数，避免this指向问题。同时添加resize事件监听，当窗口大小改变时重新计算画布尺寸。
let particles = [];
const particleCount = 80;
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
function animate() {
ctx.clearRect(0, 0, width, height);
particles.forEach(p => {
updateParticle(p, mouse.x, mouse.y);
drawParticle(p);
});
drawLines(particles);
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', () => {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
});
第六步：性能优化与参数调优
如果粒子数量超过200，会出现明显卡顿。此时可以采取以下措施：1) 使用globalCompositeOperation = 'lighter'让粒子叠加更亮而不增加绘制负担；2) 将阴影效果迁移至CSS伪元素模拟；3) 利用devicePixelRatio缩放画布来适配高清屏，但保留帧缓冲池。
调参建议：粒子半径设置在2-4像素之间最柔和；连线距离控制在100-150之间；粒子速度不要超过0.8，否则动画显得急躁。建议使用requestAnimationFrame帧率监控工具查看实时性能。
扩展玩法：颜色渐变与鼠标拖尾
想要更炫酷的效果，可以让粒子颜色随位置变化。在drawParticle中，根据粒子x坐标动态计算HSL色相值。鼠标交互也可以升级为“跟随拖尾”，即让最近的一个粒子强制吸附到光标位置，形成引力效果。
// 颜色渐变示例
ctx.fillStyle = `hsla(${p.x / width * 360}, 70%, 60%, ${p.opacity})`;
// 鼠标跟随
if (p.isAttracted) {
const lerpFactor = 0.05;
p.x += (mouseX - p.x) * lerpFactor;
p.y += (mouseY - p.y) * lerpFactor;
}
总结与实践建议
通过以上六个步骤，你已经掌握了Canvas粒子特效的全部核心逻辑。实际项目中，建议将粒子逻辑封装成独立的JavaScript模块，并暴露配置API供外部调用。考虑到移动端性能，粒子数量应控制在50以内，且关闭阴影效果。
尝试将本教程的代码整合到你的个人网站中，你会发现背景立刻变得生动起来。如果遇到性能瓶颈，优先检查连线计算的复杂度。最后，请务必在IE浏览器测试兼容性，必要时使用canvas-polyfill。