Canvas点击检测需手动实现：先用getBoundingClientRect转换坐标并按比例缩放，再依图形类型用矩形范围、距离平方、isPointInPath或包围盒判断；须独立维护图形元数据，按绘制顺序倒序遍历响应，高频场景节流，大量图形可引入四叉树优化。
Canvas 本身不提供“点击某个图形”的原生事件，所有目标检测都得靠手动计算。关键不是监听到点击，而是快速、准确地判断这个点击落在哪个图形上。
坐标转换是第一步
鼠标事件的 clientX/clientY 是相对于视口的，必须转成 Canvas 内部坐标系。这一步容易出错，尤其当 Canvas 设置了 CSS width/height 缩放时。
- 用 getBoundingClientRect() 获取 Canvas 左上角在视口中的位置
- 减去偏移量：x = event.clientX - rect.left，y = event.clientY - rect.top
- 若 Canvas 的 CSS 尺寸与 canvas 元素实际 width/height 不一致，需按比例缩放：x *= canvas.width / rect.width，y *= canvas.height / rect.height
命中检测按图形类型选方法
不同图形适用不同判断逻辑，硬套一种方式会导致误判或性能浪费。
- 矩形：检查 x ∈ [left, left + width] 且 y ∈ [top, top + height]
- 圆形：用距离平方比较（避免 Math.sqrt）—— (x−cx)² + (y−cy)² ≤ r²
- 路径/多边形：用 ctx.isPointInPath(path, x, y)，需提前用 Path2D 或 beginPath() 构建路径
- 文字：无直接 API，靠 measureText() 估算包围盒，再做矩形检测
图形状态必须独立维护
Canvas 是“画完即忘”的，不会记住你画过什么。要支持点击，就得自己存一份图形元数据。
- 每个可交互图形用对象描述：{ id, type, x, y, width, height, radius, path, onClick }
- 推荐用数组或 Map 管理，方便遍历和查找
- 绘制时仍调用 fillRect()/arc()/fill(path) 等原生方法，但不依赖 DOM 节点
- 对频繁交互的复杂图形，可预缓存 Path2D 实例或包围盒，避免每次重建路径
处理重叠与性能优化
多个图形堆叠时，谁该响应？大量图形时，怎么不卡顿？这是实际项目绕不开的问题。
- 响应优先级：从后往前遍历图形列表（最后绘制的在最上层），第一个命中的就触发，立即 return
- 高频场景（如拖拽中持续检测）加节流，比如用 requestAnimationFrame 控制每帧最多检测一次
- 图形数量超百个时，可引入空间索引（如四叉树），但多数业务场景直接遍历足够快
- 静态图形可用颜色拾取法：另起一个隐藏 Canvas，为每个图形填唯一色，点击时读取该位置像素值反查图形 ID
