canvas图形拾取分颜色缓冲区法和坐标区域判定法：前者用隐藏canvas为图形编码纯色，通过像素读取反查id，复杂度o(1)且支持任意形状，但内存开销大；后者维护图形数据结构并用ispointinpath或几何计算判断，适合图形数量少的场景。
颜色缓冲区法（离屏 canvas + 像素编码）
核心思路是：另建一个隐藏的 canvas，把每个可拾取图形用唯一纯色（如 #000001、#000002）绘制一遍，再通过点击坐标读取该位置的颜色值，反查对应图形。
- 实现关键：用
ctx.getImageData(x, y, 1, 1)获取单像素 RGBA 值，转为索引或 ID；需确保图像已加载完成且无跨域限制（<img crossorigin="anonymous">） - 优势：拾取复杂度 O(1)，无论画布上有几百个图形，响应都极快；对任意形状（贝塞尔曲线、不规则多边形）天然支持
- 注意点：内存开销翻倍（双 canvas 渲染）；颜色精度有限（最多约 1677 万种颜色，但实际常映射为 24 位整数 ID）；canvas 尺寸过大时
getImageData调用可能卡顿
坐标区域判定法（几何计算 + isPointInPath）
不依赖额外画布，而是维护图形数据结构（如矩形 {x,y,w,h}、圆形 {x,y,r}），在鼠标事件中逐个做数学判断，或借助 Canvas 原生 API。
-
isPointInPath()需配合beginPath()和路径绘制调用，每次只能检测当前路径；多个图形需循环重绘路径并判断，适合数量不多（ - 自定义几何判断更灵活：矩形用
x ≤ mx ≤ x+w && y ≤ my ≤ y+h；圆用(mx−x)² + (my−y)² ≤ r²；多边形可用射线交叉数法或环绕数法（后者抗凹形/自交更稳） - 优势：内存友好，无需额外 canvas；便于叠加交互逻辑（如 hover 高亮、拖拽边界校验）
- 局限：不规则路径需完整路径数据；大量图形时遍历耗时明显；描边宽度较大时
isPointInStroke()易误判
混合使用更实用
真实项目中往往组合两种思路：用包围盒（bounding box）快速过滤大部分图形，再对候选集用精确路径或颜色法细筛；或对 UI 控件层用坐标判定，对复杂绘图层用颜色缓冲。比如 Konva.js 库就默认启用颜色缓冲，同时开放自定义 hit 图形的接口。
关键不是选“哪种更好”，而是看图形数量、更新频率、形状复杂度和是否需要高频拖拽——静态图表优先坐标判定，实时协作白板倾向颜色缓冲。
