Background Dynamics
通过背景粒子的流动、几何图形的缓动变换或流动渐变，丰富页面背景的质感与生命力。
粒子系统
数百个粒子在画布上自由运动，通过连线算法在近距离粒子间绘制连接线，形成有机的网络结构。鼠标移动产生排斥力场。
/* Canvas 粒子系统核心 */
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (Math.random() - 0.5) * 2;
this.vy = (Math.random() - 0.5) * 2;
this.radius = Math.random() * 3 + 1;
}
update() {
this.x += this.vx; this.y += this.vy;
if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(99,102,241,0.5)';
ctx.fill();
}
}
// 连线算法
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 < 100) {
ctx.strokeStyle = `rgba(99,102,241,${1-dist/100})`;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
← 返回索引