要获取鼠标相对于Canvas内部的精准坐标，需用getBoundingClientRect()获取Canvas视口偏移，再结合CSS缩放比scaleX=canvas.width/rect.width、scaleY=canvas.height/rect.height校正，最终计算x=(e.clientX−rect.left)×scaleX、y=(e.clientY−rect.top)×scaleY。
要获取鼠标相对于Canvas内部的精准坐标，核心是把鼠标在页面中的全局位置，减去Canvas左上角相对于视口（viewport）的偏移量，并考虑Canvas的CSS缩放、滚动条偏移等影响。关键不是简单用 event.offsetX/Y（它在某些浏览器或缩放下不可靠），而是手动计算更稳定。
获取Canvas相对视口的真实位置
使用 getBoundingClientRect() 是最可靠的方式，它返回Canvas左上角相对于当前视口左上角的距离（含滚动、缩放、边框、内边距影响）：
- 调用
canvas.getBoundingClientRect()得到{ left, top, width, height } - 其中
left和top已自动排除页面滚动（window.scrollX/Y）和CSS transform/zoom的影响 - 注意：若Canvas父容器有
transform或iframe嵌套，需额外处理（一般单页应用中无需）
修正CSS缩放导致的坐标失真
当Canvas设置了 width/height CSS样式（而非直接设 canvas.width/canvas.height 属性）时，会出现“显示尺寸 ≠ 绘图分辨率”，此时需计算缩放比例：
- 横向缩放比：
scaleX = canvas.width / rect.width - 纵向缩放比：
scaleY = canvas.height / rect.height - 鼠标原始坐标转换为绘图坐标：
x = (mouseX - rect.left) * scaleXy = (mouseY - rect.top) * scaleY
绑定事件并实时计算（推荐写法）
将逻辑封装成可复用函数，避免重复计算矩形信息（尤其在频繁触发的 mousemove 中）：
const canvas = document.getElementById('myCanvas');
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
<p>canvas.addEventListener('mousemove', (e) => {
const x = (e.clientX - rect.left) <em> scaleX;
const y = (e.clientY - rect.top) </em> scaleY;
// x, y 即为Canvas坐标系下的精准像素位置（0~canvas.width, 0~canvas.height）
});</p>
兼容滚动与高DPI屏幕（可选增强）
对大多数场景已足够；如需更高精度（例如绘图应用）可补充：
- 用
window.devicePixelRatio区分物理像素与CSS像素（但Canvas自身已通过width/height属性处理了DPI） - 滚动不影响
getBoundingClientRect()，无需手动加scrollX/Y - 若Canvas被
position: fixed或嵌套在transform: translate()容器中，需逐级向上计算偏移（较少见）
不复杂但容易忽略的是CSS宽高与Canvas属性宽高的分离——这是坐标偏差最常见的根源。只要始终用 getBoundingClientRect + 缩放比校正，就能稳定获得画布内的整数级像素坐标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
