Canvas需手动实现点击检测：先将鼠标坐标映射到Canvas坐标系，再对每个图形执行命中检测；应封装坐标归一化方法，维护图形状态对象，按类型实现对应hit test逻辑，并从后往前遍历确保上层优先响应。
Canvas 本身不支持 DOM 级别的事件绑定（如 click、mousemove），所有“点击图形”的逻辑都需要手动计算坐标、判断是否落在目标图形内。核心在于：**将鼠标事件坐标映射到 Canvas 坐标系，再对每个已绘制的图形执行命中检测（hit testing）**。
统一坐标转换与事件委托封装
避免每次监听都重复写 getBoundingClientRect() 和偏移计算。建议封装一个通用的坐标归一化方法：
- 监听
canvas的addEventListener('click', handler)，而非子元素 - 在 handler 中调用
getMousePos(event)，返回相对于 canvas 左上角的 {x, y} 值 - 该函数内部用
canvas.getBoundingClientRect()获取可视区域位置，减去 clientX/Y 偏移，并考虑canvas.width/height与 CSS 尺寸缩放差异（如设置了 width/height style）
图形状态管理与可点击标识
不能只靠重绘，必须为每个可交互图形维护独立的状态对象。推荐结构：
- 用数组或 Map 存储图形元数据，例如：
{ id: 'rect1', type: 'rect', x: 50, y: 30, w: 100, h: 60, onClick: () => alert('clicked') } - 绘制时仍用原生 API（
fillRect、arc等），但不依赖 DOM 节点 - 为简化 hit test，可额外缓存路径（Path2D）或包围盒（bounding box），尤其对复杂图形或频繁交互场景
按图形类型实现命中检测逻辑
不同图形需不同判断方式，不可一概而用矩形碰撞。常见处理：
立即学习“前端免费学习笔记（深入）”；
-
矩形：检查
x ∈ [left, left+width]且y ∈ [top, top+height] - 圆形：计算鼠标到圆心距离平方 ≤ 半径平方（避免开方提升性能）
-
路径/多边形：用
ctx.isPointInPath(path, x, y)（需先用beginPath()+ 绘制路径构建 Path2D） -
文字：用
ctx.measureText(text)结合 font 设置估算包围框，再做矩形检测（Canvas 无原生文字击中检测）
优化：事件节流与层级优先级
高频操作（如拖拽中持续检测）需防抖；多个重叠图形需定义响应优先级：
- 遍历图形数组时，从后往前（即最后绘制的在最上层），首个命中的即触发，不再继续
- 对大量图形，可预构建空间索引（如四叉树），但中小项目直接遍历足够快
- 若仅需 hover 效果，可用
mousemove+requestAnimationFrame控制检测频率，避免帧率下降
