深入理解 Canvas 交互：从图形数据管理到精准命中检测

在这个领域深耕多年的实践者，来帮你把这篇关于 Canvas 交互的攻略“翻新”得更有条理、更易上手。

Canvas 这个 API 有个“先天的短板”：它只是一块无情的画布，绘制完成后便会丢弃所有图形对象，什么也不记录。因此，要让画上去的元素能被点击、能产生交互，关键不在于指望 Canvas 自带记忆功能，而在于你必须主动管理数据，并在点击触发的那一刻，自主执行“命中检测”。这才是整个交互体系的地基。

所以，搭建好这座交互大厦，需要打好哪几个桩基？核心原则无非四条。

第一，图形数据要结构化存储，杜绝杂乱无章。

你绝不能再像新手阶段那样，直接用 ctx.fillRect() 画个矩形就草草了事。你需要为每个图形建立一份“档案”——一个轻量级的描述对象，里面清晰标明它的类型、位置、尺寸等信息。简单来说，遵循一套统一的规范：

• 矩形: { type: 'rect', x: 100, y: 150, width: 80, height: 60 }
• 圆形: { type: 'circle', cx: 200, cy: 200, r: 40 }
• 扇形: { type: 'sector', cx: 300, cy: 250, r: 50, startAngle: 0, endAngle: Math.PI / 2 }

所有这些“档案”统一存入一个数组，例如 shapes = []。后续的点击检测、拖拽、编辑等一切操作，都将从这个数组驱动。这就是所有交互的起点。

第二，点击坐标要精准“翻译”为 Canvas 内部坐标系。

浏览器事件返回的是相对于网页左上角的页面坐标（clientX/clientY）。但 Canvas 绘图采用的是它自己的画布坐标系。两者之间必须经过一次“坐标转换”。

关键分两步：先获取 Canvas 在页面中的真实位置（通过 getBoundingClientRect()），然后减去偏移量。这还没完，还要考虑设备像素比（window.devicePixelRatio），否则在高分屏下坐标会偏移。一个鲁棒性高的通用函数写法如下：

function getCanvasPoint(canvas, evt) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  return {
    x: (evt.clientX - rect.left) * scaleX,
    y: (evt.clientY - rect.top) * scaleY
  };
}

第三，每种图形都要配备专属的“安检员”——命中检测逻辑。

Canvas 本身不会帮你判断哪个图形被点击了，这完全需要你自行实现。好在常见图形的判定算法都很清晰：

• 矩形：判断点击点 (px, py) 是否落在 [x, x+width] 和 [y, y+height] 构成的矩形区域内。
• 圆形：计算点击点到圆心 (cx, cy) 的距离，若 ≤ 半径 r，则为命中。使用 Math.hypot() 计算非常方便。
• 扇形：稍复杂。先判断点是否在圆内，再计算点击点到圆心的角度 Math.atan2(py - cy, px - cx)，然后检查该角度是否落在扇形的起止弧度范围内（注意归一化处理，避免混淆）。

如果有多个图形重叠，务必从后向前遍历（即按照绘制顺序的逆序），这样优先响应最上层的图形，符合用户直观认知。

第四，点击响应的逻辑必须“解耦”，切勿直接在命中检测中操作 Canvas 上下文。

这是一个非常重要的工程习惯。千万不要在命中检测的代码里直接写 ctx.fillStyle = 'red'。那样做会让数据与视图混在一起，后续维护会非常痛苦。

正确的做法是：命中某个图形后，仅仅修改它对应数据对象的某个属性，例如 selected = true。然后，在下一帧重绘时，统一的 render() 函数会根据每个图形的 selected 状态，决定是否给它添加高亮边框或改变填充色。所有的视觉变化，都由 render() 函数统一调度。

这套机制的好处非常明显：无论你想实现多选、拖拽，还是撤销重做，只需要操作数组里的数据即可，逻辑清晰且易于调试。

原理听起来不复杂，但很多开发者在实际项目中容易忽略这些细节。把以上规矩立好，你的 Canvas 交互系统才能稳定可靠、可扩展。