Canvas拖拽核心是维护鼠标与图形的相对偏移关系：先用getBoundingClientRect转换坐标，再命中检测，按下时计算offsetX/Y，拖动时用currentMouseX/Y减偏移更新位置，mouseup必须重置状态。
Canvas 本身不支持直接绑定事件到图形上，拖拽必须靠手动计算坐标、判断点击位置、管理状态和实时更新位置。核心不是“移动图形”，而是维护鼠标与图形之间的相对偏移关系，并确保坐标换算准确、状态切换清晰。
坐标转换：先拿到 Canvas 内的真实点击点
浏览器的 clientX/clientY 是相对于视口的，而 Canvas 坐标系原点在左上角，且可能受 CSS 缩放、边框或外边距影响。不转换就会拖不准、漂移甚至错位。
- 用
canvas.getBoundingClientRect()获取 Canvas 左上角在页面中的真实位置 - 计算内部坐标：
const x = e.clientX - rect.left，const y = e.clientY - rect.top - 如果 Canvas 设置了
width/height属性（而非纯 CSS 缩放），还需按devicePixelRatio校准，避免高 DPI 设备下缩放失真
命中检测：mousedown 时找出被点中的图形
不能靠 DOM 事件委托，得自己遍历所有可拖图形，用它们的形状逻辑判断鼠标是否落在其范围内。
- 矩形：检查
x ≥ obj.x && x ≤ obj.x + obj.w && y ≥ obj.y && y ≤ obj.y + obj.h - 圆形：用距离平方比较
(x−cx)² + (y−cy)² ≤ r²，避免开方提升性能 - 路径/多边形：先用
ctx.beginPath()构建Path2D，再调ctx.isPointInPath(path, x, y) - 遍历时建议从后往前，保证最后绘制（视觉最上层）的图形优先响应
偏移计算：记住鼠标在图形内的“局部位置”
拖拽自然的关键，是保存鼠标按下时相对于图形锚点（如左上角或中心）的偏移量，而不是记录绝对屏幕坐标。
- 按下时立刻算：
offsetX = mouseX - obj.x，offsetY = mouseY - obj.y - 拖动中更新位置：
obj.x = currentMouseX - offsetX，obj.y = currentMouseY - offsetY - 这样图形始终以相同“部位”跟随鼠标，不会跳变或滑动
状态管理：明确 down / move / up 的分工
Canvas 不维护交互上下文，必须用变量手动跟踪当前拖拽状态和对象。
-
mousedown：执行命中检测，若击中则设
isDragging = true，存引用draggedObject = obj，并计算偏移量 -
mousemove：只在
isDragging为真时更新draggedObject.x/y，然后触发重绘 -
mouseup 或 mouseleave：必须重置
isDragging = false和draggedObject = null，否则鼠标移出 Canvas 后松手，图形还会继续跟随
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
