在现代Web开发中，创建引人入胜的动画效果是提升用户体验的关键。本教程将深入讲解如何使用HTML5 Canvas和JavaScript构建一个完整的粒子物理系统，包含重力、碰撞检测和用户交互功能。
一、Canvas粒子系统概述
粒子系统是计算机图形学中模拟模糊现象的技术，如火焰、烟雾、水流等。我们将创建一个包含物理特性的粒子系统，具有以下特性：
- 粒子生成与生命周期管理
- 重力与加速度物理模拟
- 边界碰撞检测与反弹
- 鼠标交互与粒子吸引/排斥
- 颜色渐变与粒子轨迹效果
二、项目结构与基础设置
首先创建基本的HTML结构，包含Canvas元素和必要的控制按钮：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas粒子系统演示</title>
</head>
<body>
<div class="controls">
<button id="gravityBtn">切换重力</button>
<button id="addParticles">添加粒子</button>
<button id="clearParticles">清除粒子</button>
<span>粒子数量: <span id="particleCount">0</span></span>
</div>
<canvas id="particleCanvas" width="800" height="600"></canvas>
<script>
// JavaScript代码将在这里实现
</script>
</body>
</html>
三、粒子系统核心实现
1. 初始化Canvas和基本变量
// 获取Canvas和上下文
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
// 设置Canvas尺寸为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 粒子数组
let particles = [];
let gravityEnabled = true;
let mouseX = null;
mouseY = null;
let attractionMode = true; // true为吸引，false为排斥
2. 创建粒子类
class Particle {
constructor(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius || Math.random() * 5 + 2;
this.color = this.generateColor();
this.velocity = {
x: (Math.random() - 0.5) * 2,
y: (Math.random() - 0.5) * 2
};
this.alpha = 1;
this.life = 100; // 粒子生命周期
this.decay = Math.random() * 0.02 + 0.005; // 衰减率
}
// 生成随机颜色
generateColor() {
const hue = Math.floor(Math.random() * 360);
return `hsla(${hue}, 70%, 60%, ${this.alpha})`;
}
// 绘制粒子
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
// 更新粒子状态
update() {
// 应用重力
if (gravityEnabled) {
this.velocity.y += 0.05;
}
// 鼠标交互
if (mouseX !== null && mouseY !== null) {
const dx = mouseX - this.x;
const dy = mouseY - this.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) { // 影响范围
const force = attractionMode ? 0.5 : -0.5;
this.velocity.x += (dx / distance) * force;
this.velocity.y += (dy / distance) * force;
}
}
// 更新位置
this.x += this.velocity.x;
this.y += this.velocity.y;
// 边界碰撞检测
if (this.x - this.radius = canvas.width) {
this.velocity.x = -this.velocity.x * 0.8; // 能量损失
this.x = this.x - this.radius <= 0 ? this.radius : canvas.width - this.radius;
}
if (this.y - this.radius = canvas.height) {
this.velocity.y = -this.velocity.y * 0.8; // 能量损失
this.y = this.y - this.radius <= 0 ? this.radius : canvas.height - this.radius;
}
// 生命周期管理
this.life -= this.decay;
this.alpha = this.life / 100;
this.color = this.color.replace(/[d.]+)$/g, `${this.alpha})`);
this.draw();
}
}
3. 动画循环和工具函数
// 初始化粒子
function initParticles(count = 50) {
for (let i = 0; i {
particle.update();
// 移除生命周期结束的粒子
if (particle.life {
mouseX = event.x;
mouseY = event.y;
});
canvas.addEventListener('mouseleave', () => {
mouseX = null;
mouseY = null;
});
// 点击切换吸引/排斥模式
canvas.addEventListener('click', () => {
attractionMode = !attractionMode;
});
// 初始化并开始动画
initParticles();
animate();
4. 控制按钮功能实现
// 切换重力
document.getElementById('gravityBtn').addEventListener('click', () => {
gravityEnabled = !gravityEnabled;
});
// 添加粒子
document.getElementById('addParticles').addEventListener('click', () => {
initParticles(25);
});
// 清除粒子
document.getElementById('clearParticles').addEventListener('click', () => {
particles = [];
updateParticleCount();
});
// 窗口大小调整
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initParticles(20);
});
四、高级效果扩展
1. 添加粒子间连线效果
function drawConnections() {
const maxDistance = 100;
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 distance = Math.sqrt(dx * dx + dy * dy);
if (distance < maxDistance) {
const opacity = 1 - distance / maxDistance;
ctx.beginPath();
ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.2})`;
ctx.lineWidth = 1;
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
ctx.closePath();
}
}
}
}
// 在animate函数中调用drawConnections()
2. 实现粒子喷射效果
function createExplosion(x, y, count = 30) {
for (let i = 0; i {
createExplosion(event.x, event.y);
});
五、性能优化建议
对于复杂的粒子系统，性能是关键考虑因素：
- 使用离屏Canvas进行预渲染静态元素
- 限制粒子数量，根据设备性能动态调整
- 使用requestAnimationFrame进行动画循环
- 优化碰撞检测，使用空间分区算法如四叉树
- 减少Canvas状态变化，批量绘制操作
六、完整代码整合
将上述所有代码片段整合到一个HTML文件中，即可运行完整的粒子系统演示。用户可以通过按钮控制重力、添加或清除粒子，通过鼠标与粒子交互，双击创建爆炸效果。
总结
本教程详细介绍了如何使用HTML5 Canvas创建高级粒子系统，包括物理模拟、用户交互和视觉效果。通过这个项目，你不仅学会了Canvas绘图技术，还掌握了动画循环、物理模拟和性能优化等重要概念。
你可以进一步扩展这个系统，添加更多高级功能如：
- 粒子纹理和图像替代圆形
- 更复杂的物理 forces（风力、涡旋等）
- 3D效果使用透视和深度
- 与后端集成保存和加载粒子配置
希望本教程帮助你深入理解Canvas动画和物理模拟，为创建更复杂的Web图形应用打下坚实基础。
