html粒子特效代码

这段代码的核心就三件事：画点、连点、效代响应鼠标。粒特120个彩色小点随机分布在屏幕上，效代各自以缓慢速度漂移。粒特当两个点距离小于100像素时，效代自动连一条半透明的粒特线——距离越近线越清楚，拉远了就淡出。效代鼠标靠近时，粒特附近的效代点会被吸引过去，像一群受惊的粒特鱼群绕着你游。 我调参数时发现，效代点数量超过200，粒特连线判断就会让帧率掉到30以下。效代120是粒特个甜点值，视觉密度够，性能也稳。线的透明度用`1 - dist/100`计算，这个线性递减比固定透明度自然多了——远处若隐若现，近处清晰锐利，纵深一下就出来了。 颜色选了四个高饱和的：珊瑚红、明黄、湖蓝、粉紫。放在深色背景上特别跳。你要是嫌花哨，改成单色系也行，但别用纯白——纯白配细线，屏幕一亮就糊成一团。 交互那块其实是个偷懒的做法。常规思路是计算鼠标与每个粒子的距离，超过阈值就施加力。我直接用了简单的线性插值——鼠标周围80像素内的点，每帧向鼠标方向移动3%的偏移量。效果差不多，代码少写十行。缺点是鼠标快速移动时，点会拖出残影，但配合canvas的逐帧清除，反而有种彗星尾巴的错觉。 你注意到`requestAnimationFrame`里没有写帧率限制，这玩意儿默认跟随显示器刷新率（通常60Hz）。如果CPU吃紧，可以加个时间戳判断，隔帧渲染。但就这个规模的计算量，真没必要。 最后说个坑。`addEventListener('resize')`里我重新设了canvas宽高，但没清空粒子数组——旧粒子的坐标可能超出新画布边界。好在update方法里有边界反转逻辑，超出后自动反弹回来，算是个隐形的自愈机制。要是你改代码时删了那两行判断，窗口一拉小，一半粒子就永久消失了。