鼠标跟随的光点效果

效果说明

本案例实现了一个平滑跟随鼠标移动的光点效果。光点会以柔和的方式追踪鼠标位置，并带有渐变光晕效果。

核心实现

1. 使用线性插值实现平滑移动

// 新位置 = 当前位置 + (目标位置 - 当前位置) * 速度
light.x += (light.targetX - light.x) * light.speed;
light.y += (light.targetY - light.y) * light.speed;

2. 使用径向渐变创建发光效果

const gradient = ctx.createRadialGradient(
    light.x, light.y, 0,     // 内圆圆心和半径
    light.x, light.y, 50     // 外圆圆心和半径
);
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

3. 通过半透明层实现拖尾效果

拖尾效果的原理是在每一帧动画中，用一个半透明的黑色矩形覆盖整个画布。由于不是完全覆盖（透明度为0.1）， 之前帧绘制的内容会逐渐变暗但不会立即消失，从而形成渐变消失的拖尾效果。

具体步骤：

1. 每一帧开始时，绘制一个透明度为0.1的黑色矩形
2. 之前帧的光点会被轻微遮挡，但仍然可见
3. 随着帧数增加，早期的光点会逐渐变暗直至消失
4. 新的光点不断被绘制，形成连续的拖尾效果

ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

透明度的选择很重要：

• 值越小（如0.05）：拖尾效果越长，消失得越慢
• 值越大（如0.2）：拖尾效果越短，消失得越快
• 0.1是一个比较平衡的值，能产生适中的拖尾长度

Demo