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