Canvas本身无寻路功能，需用JavaScript实现A*算法：正确管理openSet/closedSet、用Set/Map处理坐标与分数、分离路径计算与绘图，并注意坐标抽象层统一。
Canvas里没有内置的寻路功能，得自己实现A*
HTML 本身只是绘图表面，不提供坐标系导航、障碍物检测或路径计算能力。所谓“Canvas寻路”，本质是在二维网格或自由坐标空间中，用JavaScript实现A*算法，再把结果点序列画到上。面试问这个，重点不是画布操作，而是能否写出正确、可调试的A*核心逻辑。
A*实现必须拆解清楚openSet和closedSet的更新逻辑
很多人写错，不是因为公式记不住，而是状态管理混乱：比如重复加入同一坐标到openSet、没及时从openSet移除已扩展节点、或者gScore更新后没触发openSet重排序。JS里推荐用Set存坐标字符串（如`${x},${y}`），用Map存gScore和fScore，避免对象引用误判。
- 每次从
openSet取fScore最小节点时，用Array.from(openSet).sort()临时排序（小地图够用）；大地图建议用优先队列库或手写二叉堆 - 邻居节点需提前过滤：越界、障碍物（查预存的
grid[y][x]或射线碰撞检测） -
gScore更新条件是：newG ，且必须同步更新fScore和确保neighbor在openSet中
Canvas绘图只是最后一步，别在draw里算路径
路径计算和渲染必须分离。常见错误是把A*主循环塞进requestAnimationFrame或draw()函数里，导致卡顿甚至无限循环。正确做法是：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 调用
findPath(start, end, grid)一次性返回Array - 在
draw()里只做纯绘图：遍历路径点，用ctx.lineTo()连成线，或逐帧绘制移动小球 - 如果要可视化搜索过程（比如面试演示），用单独的
step()函数控制单步扩展，并标记openSet/closedSet对应格子颜色，而非实时重跑整个A*
面试时最容易被追问的三个细节
考官通常不看代码多漂亮，专挑边界和设计权衡发问：
- 对角线移动是否允许？若允许，曼哈顿距离要换成欧氏或切比雪夫，且对角线
gScore增量得设为1.414而非1 - 障碍物是格子级还是像素级？格子级直接查二维数组；像素级需用
ctx.getImageData()采样，但性能差，面试中一般默认格子级 - 路径平滑怎么处理？原始A*输出的是折线，真实应用常接LOS（line-of-sight）优化或贝塞尔插值——这点不写进基础A*，但被问到要能说出下一步方案
真正卡住人的，往往不是while循环怎么写，而是没想清楚坐标抽象层：你传给A*的x/y，到底是canvas像素、网格索引，还是游戏世界坐标？混用就会出现路径偏移一格、终点永远差1个单位这种低级但难debug的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
