鼠标坐标需经逆向缩放和平移还原为画布逻辑坐标：先减canvas偏移，再除缩放比，最后减平移量；CSS缩放需额外校正，推荐统一用ctx.scale避免混淆。
Canvas 缩放后，鼠标坐标与画布内实际绘制坐标的映射关系会变化，必须通过逆向缩放和平移来还原。核心是：把屏幕坐标减去画布偏移，再除以缩放比例，最后加上画布自身的平移偏移（如果用了 ctx.translate）。
理解缩放带来的坐标偏移
调用 ctx.scale(sx, sy) 后，所有绘图操作都会被缩放，但 Canvas 的“原点”（0,0）仍在左上角。此时你用 ctx.fillRect(10, 10, 20, 20) 实际绘制区域会变大，但它的逻辑坐标仍是 (10,10)。而用户点击的屏幕位置（如 clientX/clientY）属于设备像素坐标，需转换为当前变换下的逻辑坐标。
关键点：
- Canvas 元素本身可能有 CSS 缩放（style.transform: scale()），这会影响 getBoundingClientRect() 返回的尺寸，但不影响 ctx 的变换矩阵；
- ctx 的变换（scale/translate/rotate）是累积的，可通过 ctx.getTransform() 获取当前变换矩阵；
- 最稳妥的方式是手动维护缩放和平移状态，而不是依赖 getTransform() 解析（尤其在复杂变换下易出错）。
基础坐标转换公式（无旋转、仅缩放+平移）
假设你做了如下操作：
- Canvas 容器无 CSS 缩放（推荐先禁用，避免混淆）；
- 用 ctx.scale(scaleX, scaleY) 缩放；
- 用 ctx.translate(translateX, translateY) 平移画布原点（比如实现拖拽）；
- 鼠标事件监听在 canvas 元素上，获取 event.clientX / clientY。
那么屏幕坐标 (x, y) 转为画布逻辑坐标 (logicX, logicY) 的步骤是：
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 获取 canvas 相对于视口的定位：const rect = canvas.getBoundingClientRect();
- 计算相对于 canvas 左上角的偏移：const xInCanvas = event.clientX - rect.left;
const yInCanvas = event.clientY - rect.top; - 减去画布平移量（即你传给 translate 的值）：const untransX = xInCanvas - translateX;
const untransY = yInCanvas - translateY; - 除以缩放比例还原：const logicX = untransX / scaleX;
const logicY = untransY / scaleY;
封装一个通用转换函数
建议将缩放、平移状态存为变量，而非每次从 ctx 状态读取（因为 ctx 变换不可逆查，且容易因 save/restore 混乱）：
let scale = 1;
let offsetX = 0; // 逻辑坐标系原点在 canvas 像素坐标中的 X
let offsetY = 0; // 逻辑坐标系原点在 canvas 像素坐标中的 Y
<p>function screenToLogic(x, y) {
const rect = canvas.getBoundingClientRect();
const px = x - rect.left;
const py = y - rect.top;
return {
x: (px - offsetX) / scale,
y: (py - offsetY) / scale
};
}</p><p>// 使用示例：
canvas.addEventListener('click', e => {
const { x, y } = screenToLogic(e.clientX, e.clientY);
console.log('点击对应逻辑坐标：', x, y);
});
处理 CSS 缩放（不推荐但有时 unavoidable）
如果必须用 CSS 缩放（如 canvas { transform: scale(2); }），getBoundingClientRect().width/height 会包含缩放，但 clientX/clientY 是缩放后的屏幕坐标，而 ctx 绘图仍按原始像素大小进行——这会导致坐标错位。
解决方法：
- 用 rect.width / canvas.width 计算 CSS 缩放比（同理 height），记为 cssScale；
- 在 screenToLogic 中，先把 clientX/Y 除以 cssScale，再走前面的逻辑；
- 更稳妥的做法：禁用 CSS 缩放，改用 ctx.scale() 控制，统一坐标体系。
记住：Canvas 渲染分辨率（canvas.width/height）和显示尺寸（CSS width/height）分离，务必区分 devicePixelRatio、CSS 缩放、ctx 变换三层影响。
