JavaScript实现鼠标移动粒子跟随效果

下面是讲解“JavaScript实现鼠标移动粒子跟随效果”的完整攻略。

确定目标

首先我们需要明确我们的目标：实现鼠标移动时页面上的粒子跟随鼠标移动。这种效果会增加页面的趣味性和互动性，让用户更有参与感。

分析思路

实现鼠标移动粒子跟随效果，需要做以下几个步骤：

1. 创建画布和粒子；
2. 监听鼠标移动事件；
3. 计算鼠标和粒子之间的距离和角度；
4. 将粒子移动到鼠标所在位置；
5. 可以增加随机颜色、大小、形状以及透明度等额外属性；

代码实现

下面是一个简单的实现示例：

<canvas id="canvas"></canvas>

<script>
    // 获取画布和画笔
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    // 设置画布尺寸和颜色
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context.fillStyle = '#000';
    context.fillRect(0, 0, canvas.width, canvas.height);

    // 定义粒子
    var particles = [];
    var particleCount = 100;

    for (var i = 0; i < particleCount; i++) {
        // 初始化随机粒子
        particles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            size: Math.random() * 5 + 1,
            speedX: Math.random() * 5 - 2.5,
            speedY: Math.random() * 5 - 2.5,
            color: '#' + Math.random().toString(16).slice(2, 8),
            angle: Math.random() * 360
        });
    }

    // 监听鼠标移动事件
    canvas.addEventListener('mousemove', function (event) {
        // 更新所有粒子
        particles.forEach(function (particle) {
            // 计算鼠标和粒子之间的距离和角度
            var dx = event.clientX - particle.x;
            var dy = event.clientY - particle.y;
            particle.angle = Math.atan2(dy, dx);
            var distance = Math.sqrt(dx * dx + dy * dy);

            // 将粒子移动到鼠标所在位置
            if (distance < 100) {
                particle.speedX = Math.cos(particle.angle) * 5;
                particle.speedY = Math.sin(particle.angle) * 5;
            } else {
                particle.speedX += particle.speedX / 20;
                particle.speedY += particle.speedY / 20;
            }

            particle.x += particle.speedX;
            particle.y += particle.speedY;

            // 粒子到达画布边缘时反弹
            if (particle.x < 0) {
                particle.x = canvas.width;
            } else if (particle.x > canvas.width) {
                particle.x = 0;
            }

            if (particle.y < 0) {
                particle.y = canvas.height;
            } else if (particle.y > canvas.height) {
                particle.y = 0;
            }
        });

        // 清除画布并绘制所有粒子
        context.fillStyle = '#000';
        context.fillRect(0, 0, canvas.width, canvas.height);
        particles.forEach(function (particle) {
            context.beginPath();
            context.fillStyle = particle.color;
            context.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
            context.fill();
        });
    });
</script>

在这个实现中，我们首先创建了一个画布和粒子数组。接着在初始化每一个随机粒子时，我们随机化了粒子的位置、大小、颜色、速度和角度。然后我们监听了鼠标移动事件，并在事件回调中更新了所有粒子。

在粒子移动的过程中，我们首先计算了鼠标和粒子之间的距离和角度，然后根据距离的大小决定粒子的速度，最终将粒子移动到鼠标所在位置。在粒子到达画布边缘时，我们实现了反弹效果，让粒子在画布中来回运动。

其他示例

除了上面的示例，还有其他一些实现鼠标移动粒子跟随效果的示例：

1. 实现了粒子的融合效果，让粒子在移动时能够产生更加自然的效果：https://codepen.io/rctngle/pen/VKjxJp
2. 实现了星星跟随鼠标的效果，可以应用于多种场景：https://codepen.io/rstorms90/pen/ZjxxWz

总之，实现鼠标移动粒子跟随效果需要从基础的绘图和事件监听开始，并根据自己的需求进行个性化的改造和调整。