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 等），就能准确判断点是否在其内部（遵循非零环绕规则）。
- 绘制一个带曲边的图标后，直接调用
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 的交互体验。
