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 控制检测频率，避免帧率下降

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！