用Canvas实现动态发光导航路径需协同路径生成、渲染、发光模拟与交互响应：先用SVG路径字符串定义骨架并缓存长度，再通过多重描边（渐变透明度+圆角连接）手动模拟发光效果。
用 Canvas 实现带动态发光路径的导航 UI，核心不是“画一条亮线”，而是构建一条可随用户交互实时演化的视觉动线——它既要清晰指示当前路径，又要通过光效强化层级与状态反馈。关键在于路径生成、动态渲染、发光模拟和交互响应四者的协同。
定义导航路径结构
导航路径通常不是直线，而是带圆角、分段或曲线的连通结构。建议用 SVG 路径字符串（如 M100,50 C120,30 180,30 200,50 L300,50）预先描述整体骨架，再导入 Canvas 使用。这样便于复用设计稿、支持贝塞尔控制点，并能借助 getTotalLength() 和 getPointAtLength() 精确计算任意进度位置。
- 把路径存在
中隐藏，或直接作为字符串变量维护 - 用
document.createElementNS('http://www.w3.org/2000/svg', 'path')创建临时 path 元素，设d属性后调用getTotalLength() - 避免在每帧中重复解析路径字符串，长度值只需计算一次
绘制带发光效果的路径主体
Canvas 本身不支持 CSS 式的 text-shadow 或 filter: drop-shadow，需手动模拟发光：常用方式是多重描边 + 渐变透明度。例如，先用较大线宽、低透明度的浅色描边作为“光晕”，再用小线宽、高饱和度色描边作为“路径本体”。
- 启用抗锯齿：
ctx.lineCap = 'round'; ctx.lineJoin = 'round' - 设置主路径：
ctx.strokeStyle = '#4f46e5'; ctx.lineWidth = 4 - 叠加发光层（3–4次）：
for (let i = 1; i - 若需更柔和光感，可用
ctx.shadowColor+shadowBlur（注意：仅对stroke()和fill()生效，且需清除 shadow 状态避免污染后续绘制）
实现路径动态点亮与状态映射
导航路径的“动态”体现在两点：一是当前激活项向目标平滑过渡，二是路径段随 hover 或 focus 实时高亮。不要逐段重绘整条路径，而应拆解为“基础路径”+“高亮片段”两层。
- 基础路径用灰色系、细线宽、低透明度绘制一次（静态底图）
- 高亮片段根据当前 activeIndex 计算起始/结束长度比例，用
getPointAtLength()获取端点，再用beginPath() → moveTo() → lineTo() → stroke()单独绘制 - 加入缓动：将
progress值传入cubic-bezier(0.33, 1, 0.68, 1)类函数，使点亮过程有加速-减速节奏 - 配合
requestAnimationFrame驱动，而非setTimeout，确保 60fps 流畅性
绑定交互并保持响应式适配
导航 UI 必须适配不同屏幕尺寸，且点击/悬停区域要大于视觉路径本身，否则体验生硬。Canvas 不具备原生事件冒泡机制，需手动做坐标映射。
- 监听
canvas.addEventListener('mousemove')，用getBoundingClientRect()将 clientX/Y 转为 canvas 坐标 - 对每个导航节点预存其路径段的起点、终点及中点范围（可扩展为包围盒），用于快速命中检测
- 设置 canvas 宽高为
window.innerWidth * devicePixelRatio，再用ctx.scale(dpr, dpr)缩放上下文，避免高清屏模糊 - 监听
resize事件，重新设置 canvas 尺寸并重绘路径（路径几何不变，仅缩放坐标系）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
