流光效果的核心是模拟光沿路径移动的物理感，需通过精准路径定义、光点插值计算和三层叠加渲染实现。路径用折线数组描述并动态缩放；插值按时间t实时计算光点坐标；三层分别绘制光核、光晕与投影以增强质感；动画由requestAnimationFrame驱动确保流畅。
流光溢彩的视觉反馈，核心不是“画一条亮线”，而是模拟光沿路径移动的物理感——有起点、有方向、有拖尾、有节奏。关键在路径控制、光点插值和分层渲染三者的配合，而非堆叠特效。
精准定义流光路径
流光必须依附于明确路径，否则容易失焦。推荐用折线数组描述，每段含有序坐标点：
- 用 moveTo + lineTo 绘制路径轮廓，不直接 stroke，仅作坐标参考
- 路径坐标建议基于设计稿固定宽高（如 1920×80），再通过 cssPixelRatio = window.innerWidth / 1920 动态缩放，避免响应式下偏移
- 多段路径分开存储（如
traces = [{points: [...]}]），方便独立启停或反向流动
让光“动起来”的本质是插值计算
所谓流光，其实是高亮光斑沿路径匀速前进。不要用 setTimeout 控制整条线位移，而应按时间进度 t ∈ [0, 1] 实时算出光点坐标：
- 对两点线段：x = x₀ + (x₁ − x₀) × t，y = y₀ + (y₁ − y₀) × t
- 对多点折线：先按各段长度加权判断 t 落在哪一段，再对该段做线性插值
- 封装 getPointOnTrace(trace, t) 函数，返回 {x, y, angle}，angle 可用于后续光晕朝向校准
三层叠加渲染，才有“溢彩”质感
单色圆点太生硬。真实流光有“头亮尾衰”的纵深感，需分层绘制：
-
光核层：半径 3–5px 的实心圆，用
createRadialGradient径向渐变（白→透明），突出焦点亮度 -
光晕层：半径 12–20px 的模糊圆，透明度调低（如
globalAlpha = 0.6），增强扩散感 -
投影层：启用
shadowBlur = 10–15和shadowColor = 'rgba(100, 180, 255, 0.5)'，强化立体浮出效果
保持流畅，靠 requestAnimationFrame 驱动
避免使用 setInterval 或 setTimeout 模拟动画，它们无法与屏幕刷新率同步，易卡顿：
- 用
window.requestAnimationFrame(render)递归调用渲染函数 - 每次帧开始前调用
ctx.clearRect(0, 0, width, height)清空画布 - 注意 canvas 元素的 style 宽高必须显式设置（如
style="width:100%;height:80px;"），否则拉伸后坐标错乱
