要让Canvas真正响应鼠标操作，关键是将鼠标点准确映射到绘图坐标系：先用getBoundingClientRect获取视口位置，再按scaleX=canvas.width/rect.width、scaleY=canvas.height/rect.height校正缩放，最终计算x=(e.clientX-rect.left)scaleX、y=(e.clientY-rect.top)scaleY。
要让Canvas真正响应鼠标操作，关键不是拿到屏幕坐标，而是把鼠标点准确映射到画布的绘图坐标系里。这一步做不准，点击、拖拽、绘制都会偏移——尤其在缩放、滚动或高DPI屏幕上更明显。
用getBoundingClientRect统一获取画布视口位置
这是最稳定的基础操作。它自动排除页面滚动、CSS transform、zoom等干扰，直接返回Canvas左上角相对于当前视口的left/top值：
- 调用
canvas.getBoundingClientRect()，得到包含left、top、width、height的对象 - 这个
left和top已经扣除了window.scrollX/Y，不用再手动加滚动偏移 - 如果Canvas父容器用了
transform或嵌在iframe里，才需额外处理；普通布局中可直接使用
必须校正CSS缩放带来的坐标失真
很多开发者只设canvas.style.width和style.height，却没同步设置canvas.width和height属性——这就造成“显示尺寸 ≠ 绘图分辨率”，鼠标一动就错位。
- 横向缩放比：
scaleX = canvas.width / rect.width - 纵向缩放比：
scaleY = canvas.height / rect.height - 最终坐标：
x = (e.clientX - rect.left) * scaleX，y = (e.clientY - rect.top) * scaleY
事件绑定建议写法（避免性能陷阱）
不要在每次mousemove里反复调用getBoundingClientRect()——它触发重排，频繁调用会卡顿。应提前计算并复用：
- 在初始化时获取
rect、scaleX、scaleY - 事件回调内只做减法和乘法运算
- 若Canvas尺寸可能动态变化（如响应式），才需在resize后重新计算
简单场景可用offsetX/offsetY，但有局限
e.offsetX和e.offsetY在Chrome/Firefox中表现尚可，但它以元素内容区左上角为原点（不包含border），且在Canvas旋转或缩放时行为不一致。
- 适合快速原型或静态布局
- 正式项目、绘图工具、白板类应用务必用
getBoundingClientRect + 缩放校正方案 - Safari对
offsetX/Y支持较弱，数值常偏移1px（尤其带border时）
