ispointinpath只检测最近一次beginpath后绘制的路径，需为每个图形单独调用并做坐标转换，配合path2d缓存可提升性能。
Canvas 中的 isPointInPath 是判断鼠标是否落在某条路径内的核心方法，但它只对**最近一次调用的 beginPath 之后绘制的路径有效**——这是实现精准交互响应的关键前提，也是最容易出错的地方。
路径必须在调用 isPointInPath 前完成绘制
Canvas 的路径状态是“一次性”的：每次调用 beginPath() 都会清空当前路径，后续的 moveTo、lineTo 等操作构建新路径，而 isPointInPath(x, y) 只能检测这个“最新路径”是否包含指定点。它不会记住你之前画过的任何图形。
- 错误写法：先画圆、再画矩形、最后统一用
isPointInPath检测——只会检测矩形，圆被覆盖丢弃 - 正确做法：每画一个可交互图形，就立即调用
isPointInPath判断（或保存路径后重绘检测） - 小技巧：用
save()/restore()包裹单个图形绘制+检测逻辑，避免干扰其他路径
复杂路径（如贝塞尔曲线、多段闭合区域）同样适用
isPointInPath 不区分路径简单与否，只要它是合法的 Canvas 路径（含 arc、quadraticCurveTo、bezierCurveTo、rect、closePath 等），就能准确判断点是否在其内部（遵循非零环绕规则）。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 绘制一个带曲边的图标后，直接调用
isPointInPath(mouseX, mouseY)即可响应点击 - 多个不相连的子路径（如字母“B”的上下两个椭圆）需合并为一条路径（用
moveTo分隔），否则isPointInPath只认最后一个子路径 - 若需检测多个独立图形，应为每个图形单独调用
beginPath → 绘制 → isPointInPath
配合事件坐标做屏幕到 Canvas 坐标转换
鼠标事件的 clientX/clientY 是页面坐标，必须转换为 Canvas 像素坐标才能用于 isPointInPath。Canvas 的 getBoundingClientRect() 提供了可靠依据。
- 获取 canvas 元素位置：
const rect = canvas.getBoundingClientRect() - 计算画布内坐标：
const x = event.clientX - rect.left * (canvas.width / rect.width) - 注意缩放：如果 Canvas 用 CSS 放大/缩小，需按
canvas.width/rect.width比例校正
性能优化：避免重复绘制和频繁调用
在 mousemove 中反复调用 isPointInPath 本身开销不大，但若每次都重绘整个复杂路径，就会成为瓶颈。
- 推荐方案：预先用
Path2D对象缓存路径（const path = new Path2D(); path.rect(...)），然后传给isPointInPath(path, x, y) - 更轻量：只在 hover 或 click 时检测，而非持续监听 mousemove
- 大量图形时：先用包围盒（bounding box）快速排除，再对候选对象调用
isPointInPath
不复杂但容易忽略细节：路径时效性、坐标转换、缓存策略，这三点理清，isPointInPath 就能稳稳撑起 Canvas 的交互体验。
