Canvas图像位置跨设备差异的根源是设备像素比、CSS显示尺寸与实际像素尺寸未同步，需动态调整canvas.width/height并配合ctx.scale()和事件坐标归一化处理。
HTML5中canvas绘图坐标系本身没有设备差异
真正导致平板和电脑上图像位置“看起来不同”的，不是canvas坐标系统变了，而是设备像素比（window.devicePixelRatio）、视口缩放、CSS渲染尺寸与画布实际像素尺寸的错位。比如你在canvas上用ctx.fillRect(10, 10, 20, 20)画一个方块，逻辑坐标永远是(10,10)，但最终在屏幕上占多少物理像素，取决于canvas.width/canvas.height是否匹配当前显示所需的像素密度。
canvas.width和canvas.style.width不一致是主因
常见错误是只设置canvas.style.width = "100%"或固定CSS宽高，却不同步调整canvas.width和canvas.height属性——这会导致浏览器拉伸画布，所有绘制内容被模糊、偏移、比例失真。
-
canvas.width和canvas.height是画布的**渲染像素数**（即内部绘图缓冲区大小） -
canvas.style.width和.style.height是画布在页面上的**CSS显示尺寸**（单位可以是px、%、rem等） - 当二者不等价（如
canvas.width=800但style.width="400px"），浏览器会按2×缩放渲染，鼠标事件坐标、图像定位全都会偏
正确做法是动态同步：
function resizeCanvas() {
const canvas = document.getElementById("myCanvas");
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
canvas.style.width = rect.width + "px";
canvas.style.height = rect.height + "px";
const ctx = canvas.getContext("2d");
ctx.scale(dpr, dpr); // 确保绘图逻辑坐标不变
}触摸坐标 vs 鼠标坐标的归一化处理
平板用touchstart/touchmove，电脑用mousedown/mousemove，但它们返回的clientX/clientY都是相对于视口的CSS像素，而canvas绘图坐标基于的是自身width/height（含DPR）。不做转换，点击位置就会偏差。
立即学习“前端免费学习笔记（深入）”；
- 必须用
canvas.getBoundingClientRect()获取当前显示区域的真实左/上偏移 - 再结合
window.devicePixelRatio把事件坐标映射回画布内部像素坐标 - 示例计算点击点在画布内的逻辑坐标：
function getCanvasPoint(e, canvas) {
const rect = canvas.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
let x, y;
if (e.touches) {
x = (e.touches[0].clientX - rect.left) * dpr;
y = (e.touches[0].clientY - rect.top) * dpr;
} else {
x = (e.clientX - rect.left) * dpr;
y = (e.clientY - rect.top) * dpr;
}
return { x, y };
}viewport设置和字体/布局缩放干扰定位
部分安卓平板或iOS Safari在双击放大、强制缩放、或未设viewport时，会让整个页面“虚拟缩放”，此时getBoundingClientRect()返回的尺寸仍是CSS像素，但实际渲染已变形，导致坐标映射失效。
- 务必在
中声明严格viewport： - 避免使用
body { zoom: ... }或transform: scale()等全局缩放CSS - 禁用用户缩放后，仍需监听
resize和orientationchange，重新调用resizeCanvas()
跨设备图像定位问题，本质是“逻辑坐标→CSS像素→物理像素”三层映射没对齐；最容易被忽略的是：即使你写了响应式代码，只要没在每次resize后重置canvas.width/height并重置ctx.scale()，位置偏差就一定会存在。
