Canvas 在触屏设备上绘图位置偏移，根本原因是 pageX/pageY 与元素实际渲染区域（含滚动、缩放、边框、内边距）之间的坐标计算不一致；使用 getBoundingClientRect() 替代手动减去 offsetLeft/clientLeft 等属性，可精准获取相对于画布左上角的坐标。
canvas 在触屏设备上绘图位置偏移，根本原因是 `pagex/pagey` 与元素实际渲染区域（含滚动、缩放、边框、内边距）之间的坐标计算不一致；使用 `getboundingclientrect()` 替代手动减去 `offsetleft/clientleft` 等属性，可精准获取相对于画布左上角的坐标。
在基于 HTML5 Canvas 的交互式绘图应用中，鼠标事件（mousedown/mousemove）通常能准确映射到画布坐标，但触控事件（touchstart/touchmove）却常出现整体右下偏移——例如手指点在左上角，图形却绘制在右下区域。这并非逻辑错误，而是坐标系理解偏差所致。
? 根本原因：offsetLeft 和 clientLeft 不适用于触控坐标校准
原代码中触控坐标的计算方式为：
pos = {
x: ev.pageX - ev.target.offsetLeft - ev.target.clientLeft,
y: ev.pageY - ev.target.offsetTop - ev.target.clientTop
}该写法存在严重缺陷：
-
offsetLeft/offsetTop返回的是相对于最近定位祖先元素的偏移，而非视口； -
clientLeft/clientTop是边框宽度（通常为 0），不包含滚动、缩放或 CSS transform 影响； - 在响应式布局、容器有
padding/border、页面存在滚动或高 DPI 屏幕下，该计算极易失准。
✅ 正确做法是：使用 element.getBoundingClientRect() 获取画布当前渲染区域在视口中的绝对位置（已自动考虑缩放、滚动、CSS 偏移），再用 pageX/pageY 减去它：
if (TOUCH_EVS.includes(ev.type)) {
ev.preventDefault();
const touch = ev.changedTouches[0];
const rect = ev.target.getBoundingClientRect();
pos = {
x: touch.pageX - rect.left,
y: touch.pageY - rect.top
};
}getBoundingClientRect() 返回的对象（{ left, top, width, height }）是浏览器渲染引擎提供的像素级精确矩形信息，完全适配现代 Web 场景（包括 iOS Safari、Chrome 移动版、强制触控模拟等）。
✅ 完整修复建议（含关键注意事项）
统一坐标源：无论鼠标还是触摸，最终都应转换为 Canvas 内部坐标系（即
canvas.width/canvas.height范围内）。getEvPos()应始终返回相对于<canvas></canvas>元素左上角（content box）的坐标。-
避免混用
offsetX/offsetY与触控逻辑：offsetX/offsetY在部分浏览器中对<canvas></canvas>支持不稳定，且不适用于touch事件（它们是 MouseEvent 特有属性）。因此，即使鼠标事件也建议统一用getBoundingClientRect()计算，保证逻辑一致性：function getEvPos(ev) { const target = ev.target; const rect = target.getBoundingClientRect(); let x, y; if (ev.type.startsWith('touch')) { ev.preventDefault(); const touch = ev.changedTouches[0]; x = touch.pageX - rect.left; y = touch.pageY - rect.top; } else { x = ev.clientX - rect.left; y = ev.clientY - rect.top; } // 可选：处理 devicePixelRatio 高清屏（若 canvas 已做 DPR 缩放） const dpr = window.devicePixelRatio || 1; return { x: x * dpr, y: y * dpr }; } -
确保 Canvas 渲染尺寸与 CSS 尺寸分离：
若通过 CSS 设置canvas { width: 100%; height: 400px; }，但未同步设置canvas.width/canvas.height属性，Canvas 会拉伸渲染，导致坐标错乱。务必在resizeCanvas()中同步设置：function resizeCanvas() { const elContainer = document.querySelector('.canvas-container'); const canvas = gElCanvas; // 设置 CSS 尺寸（影响布局） canvas.style.width = `${elContainer.clientWidth - 100}px`; canvas.style.height = `${elContainer.clientHeight - 200}px`; // 同步设置真实渲染分辨率（关键！） const dpr = window.devicePixelRatio || 1; canvas.width = (elContainer.clientWidth - 100) * dpr; canvas.height = (elContainer.clientHeight - 200) * dpr; // 缩放上下文以匹配 CSS 显示 gCtx.scale(dpr, dpr); } onMove中无需额外move(dx, dy)逻辑（除非实现拖拽平移）：
当前代码中move(dx, dy)修改了gShape.pos，但后续所有绘制（如strokeRect(pos.x, pos.y, ...)）均直接使用pos坐标，该move()实际未生效，反而可能干扰状态。若目标是“跟随手指绘制”，应直接使用pos；若需画布平移功能，则需另建变换矩阵。
✅ 总结
| 问题 | 正解 |
|---|---|
| 触控坐标偏移 | ✅ 用 getBoundingClientRect() 替代 offsetLeft/top
|
| 混合事件坐标不一致 | ✅ 统一用 clientX/Y（鼠标）和 pageX/Y（触摸）+ rect 计算 |
| 高清屏模糊/错位 | ✅ 结合 devicePixelRatio 缩放 canvas 内存尺寸与 ctx |
| CSS 与 Canvas 尺寸脱节 | ✅ canvas.width/height ≠ canvas.style.width/height，必须显式同步 |
修复后，你的绘图应用将在桌面、平板、手机全平台精准响应触控操作——坐标零偏移，体验一致可靠。
