实现涂鸦板精准坐标转换需用getBoundingClientRect()获取画布视口位置，再通过canvas.width/rect.width等比例因子校正CSS缩放与高DPI影响，最终用(clientX−left)×scaleX公式得出逻辑坐标。
要实现涂鸦板的精准坐标转换，核心不是直接用 MouseEvent 的 clientX/clientY，而是将其正确映射到画布（<canvas>）的逻辑坐标系中——尤其当画布被缩放、滚动、或存在外层容器偏移时，必须消除这些干扰因素。
获取画布在视口中的真实位置
不能依赖 getBoundingClientRect() 的原始结果而不加处理。需确保它反映的是画布左上角相对于当前可视窗口（含滚动）的精确像素位置：
- 调用
canvas.getBoundingClientRect()获取边界矩形 - 该结果已自动减去页面滚动量（
window.scrollX/Y），无需手动再减 - 若画布嵌套在
transform: scale(0.8)的父容器中，getBoundingClientRect返回的是渲染后尺寸，但坐标仍是正确的——关键在于后续是否按相同比例反向缩放鼠标值
将鼠标事件坐标转为画布坐标系
以 mousedown 或 mousemove 为例，标准转换公式如下：
x = e.clientX - rect.left
y = e.clientY - rect.top
立即学习“前端免费学习笔记（深入）”；
但这只是“像素坐标”，还需考虑画布自身的 width/height 属性（即绘图分辨率）与 CSS 显示尺寸（style.width/style.height）是否一致：
- 若
<canvas width="800" height="600" style="width:400px;height:300px">，则 CSS 缩放比为0.5 - 此时真实绘图坐标需进一步校正：
canvasX = (e.clientX - rect.left) * (canvas.width / rect.width)
canvasY = (e.clientY - rect.top) * (canvas.height / rect.height) - 这个比例因子（
canvas.width / rect.width）才是应对 CSS 缩放的关键，不可省略
处理高 DPI 屏幕（Retina）适配
在 MacBook 或高端 Windows 平板上，devicePixelRatio > 1 会导致线条模糊或偏移：
- 创建 canvas 时，应按设备像素比放大缓冲区：
const dpr = window.devicePixelRatio || 1;canvas.width = rect.width * dpr;canvas.height = rect.height * dpr; - 同时用 CSS 将 canvas 显示尺寸设回原始值：
canvas.style.width = rect.width + 'px';canvas.style.height = rect.height + 'px'; - 最终坐标计算仍使用前述公式，因
rect.width/height是 CSS 像素，而canvas.width/height是物理像素，比例因子已隐含了 dpr 补偿
封装成可复用的坐标解析函数
推荐封装一个工具函数，统一处理上述所有情况：
function getCanvasPoint(canvas, event) {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
return {
x: (event.clientX - rect.left) * scaleX,
y: (event.clientY - rect.top) * scaleY
};
}在事件监听中直接调用即可：canvas.addEventListener('mousemove', e => { const p = getCanvasPoint(canvas, e); drawLine(p); });
