Canvas 粒子动画效果

418 字

2 分钟

Canvas 粒子动画效果

2026-03-16

demo

JavaScript

/

HTML

/

CSS

效果说明#

本 Demo 实现了一个交谈粒子动画效果：

🎨 随机颜色粒子在画布上运动
🔗 距离较近的粒子之间自动连线
🖱️ 鼠标移动时粒子会被吸引
📱 自适应屏幕尺寸

核心代码#

HTML 结构#

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
        body { margin: 0; overflow: hidden; }
6
        canvas { display: block; background: #0a0a2e; }
7
    </style>
8
</head>
9
<body>
10
    <canvas id="particles"></canvas>
11
    <script src="particles.js"></script>
12
</body>
13
</html>

JavaScript 实现#

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

4
canvas.width = window.innerWidth;
5
canvas.height = window.innerHeight;
6

7
class Particle {
8
    constructor() {
9
        this.x = Math.random() * canvas.width;
10
        this.y = Math.random() * canvas.height;
11
        this.vx = (Math.random() - 0.5) * 2;
12
        this.vy = (Math.random() - 0.5) * 2;
13
        this.radius = Math.random() * 3 + 1;
14
    }
15

16
    update() {
17
        this.x += this.vx;
18
        this.y += this.vy;
19

20
        // 边界反弹
21
        if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
22
        if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
23
    }
24

25
    draw() {
26
        ctx.beginPath();
27
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
28
        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
29
        ctx.fill();
30
    }
31
}
32

33
// 创建粒子
34
const particles = Array.from({ length: 100 }, () => new Particle());
35

36
function connectParticles() {
37
    for (let i = 0; i < particles.length; i++) {
38
        for (let j = i + 1; j < particles.length; j++) {
39
            const dx = particles[i].x - particles[j].x;
40
            const dy = particles[i].y - particles[j].y;
41
            const dist = Math.sqrt(dx * dx + dy * dy);
42

43
            if (dist < 150) {
44
                ctx.beginPath();
45
                ctx.strokeStyle = `rgba(255,255,255,${1 - dist / 150})`;
46
                ctx.lineWidth = 0.5;
47
                ctx.moveTo(particles[i].x, particles[i].y);
48
                ctx.lineTo(particles[j].x, particles[j].y);
49
                ctx.stroke();
50
            }
51
        }
52
    }
53
}
54

55
function animate() {
56
    ctx.clearRect(0, 0, canvas.width, canvas.height);
57
    particles.forEach(p => {
58
        p.update();
59
        p.draw();
60
    });
61
    connectParticles();
62
    requestAnimationFrame(animate);
63
}
64

65
animate();