Canvas动态实现波束搜索可视化：构建带时间轴的状态树，分层渲染节点与连线，用颜色/粗细编码分数和剪枝状态，高亮最优路径并添加脉冲光晕，支持键盘控制、参数调节及节点详情查看。
用 Canvas 实现动态波束搜索（Beam Search）的视觉指引，核心是把搜索过程中的候选路径、概率衰减、剪枝操作转化为可逐帧更新的图形元素——不是画静态图，而是模拟“搜索探针”在状态空间中分叉、延伸、收缩的动画过程。
1. 构建带时间轴的状态树结构
波束搜索本质是维护一个固定宽度 k 的候选集，每步扩展所有当前节点，再按得分排序取前 k 个。Canvas 动画需将这个过程映射为“节点→连线→高亮→淘汰”的可视化生命周期：
- 每个候选序列（如文本生成中的 token 序列）对应一个 节点对象，含属性：
id、text、score、depth（步数）、parentID - 用数组
currentBeam存储当前层节点；用allNodes缓存全部历史节点（用于回溯连线） - 每调用一次
step()，生成新候选、排序、截断，并标记被淘汰节点的isPruned = true
2. Canvas 绘制逻辑：分层渲染 + 状态驱动样式
避免每帧清空重绘全图，采用“增量更新”策略提升性能：
- 背景层：仅初始化时绘制坐标轴、深度刻度线、波束宽度提示文字（如 “Beam Width: 3”）
-
连线层：遍历
allNodes，对非根节点且parentID存在的节点，用ctx.beginPath() → ctx.moveTo() → ctx.lineTo() → ctx.stroke()绘制浅灰色箭头线；若该节点已被剪枝，改用虚线+淡红色 -
节点层：遍历
currentBeam，每个节点用圆角矩形表示，填充色由score归一化到 HSL 色系（如高分用亮蓝，低分用灰紫），边框加粗表示当前活跃；鼠标悬停时显示 tooltip（用canvas.getBoundingClientRect()换算坐标）
3. 添加动态反馈：路径高亮与搜索进度指示
用户需要感知“哪条路径正在被探索”，而非只看最终结果：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame驱动动画，每帧调用draw()前先执行update()更新节点位置——按深度横向分布，同一层节点 y 坐标相同，x 坐标根据索引等距排列，避免重叠 - 对当前最高分路径（即最优候选），从根节点开始递归上溯，将其所有连线设为加粗+亮黄色，并在末端节点叠加脉冲光晕（用两层同心圆，外圈透明度随
Math.sin(Date.now()*0.01)变化） - 底部加进度条：
<div id="progress">Step 4 / Max 12</div>，配合文字说明当前扩展的是第几个 token
4. 交互增强：支持暂停、回放与参数调节
教学或调试场景下，用户需控制节奏：
- 绑定键盘事件：
Space暂停/继续，←/→单步回退/前进（需缓存每步的currentBeam快照） - 提供滑块控件调整 beamWidth 和 temperature（影响分数缩放），实时触发重新计算并重绘
- 点击任一节点，展开其完整解码路径（如 “the → cat → sat → on”），并在右侧面板显示各 step 的 log 概率值
不复杂但容易忽略：Canvas 坐标原点在左上角，而思维习惯是“深度向下增长”，建议统一用 y = depth * rowHeight 计算纵坐标，保持逻辑直观。所有文本渲染用 ctx.fillText() 并开启抗锯齿（ctx.textBaseline = 'middle'; ctx.textAlign = 'center'），确保小字号清晰可读。
