这里有一个有趣的JS小功能 - “会躲避鼠标的粒子“：

惠赢的

于 2025-03-30 22:39:53 发布

阅读量122

点赞数 2

文章标签：前端

本文链接：https://blog.youkuaiyun.com/QQ1257871322/article/details/146779806

版权

<!DOCTYPE html>
<html>
<body style="background: #000; margin: 0">
<canvas id="canvas"></canvas>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置canvas全屏
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建粒子数组
const particles = [];
const particleCount = 100;

// 粒子构造函数
function Particle() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.vx = 0;
    this.vy = 0;
    this.radius = Math.random() * 3 + 1;
    this.color = `hsl(${Math.random() * 360}, 50%, 50%)`;
}

// 生成粒子
for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle());
}

// 鼠标坐标
let mouse = { x: null, y: null };
window.addEventListener('mousemove', (e) => {
    mouse.x = e.x;
    mouse.y = e.y;
});

// 动画循环
function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    particles.forEach(particle => {
        // 计算粒子与鼠标的距离
        const dx = mouse.x - particle.x;
        const dy = mouse.y - particle.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        // 当距离小于100像素时施加排斥力
        if (distance < 100) {
            const force = (100 - distance) / 50;
            const angle = Math.atan2(dy, dx);
            particle.vx -= force * Math.cos(angle);
            particle.vy -= force * Math.sin(angle);
        }

        // 应用缓动和边界限制
        particle.x += particle.vx;
        particle.y += particle.vy;
        particle.vx *= 0.95;
        particle.vy *= 0.95;

        // 边界检测
        if (particle.x < 0) particle.x = canvas.width;
        if (particle.x > canvas.width) particle.x = 0;
        if (particle.y < 0) particle.y = canvas.height;
        if (particle.y > canvas.height) particle.y = 0;

        // 绘制粒子
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
        ctx.fillStyle = particle.color;
        ctx.fill();
    });

    requestAnimationFrame(animate);
}

animate();

// 窗口大小变化时重置canvas尺寸
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});
</script>
</body>
</html>

这个功能的特点：