如何统一获取旋转Canvas上触摸与鼠标点击坐标

本文介绍如何通过 Pointer Events API 解决旋转 Canvas（如 transform: rotate(25deg)）下移动端 touchstart 缺失 layerX/layerY 的问题，推荐使用 pointerdown + offsetX/offsetY 实现跨设备、跨浏览器的坐标一致性。

常见问题：旋转 Canvas 上的坐标获取难题

先说一个常见的坑：当你在 Canvas 上加了 CSS 旋转（比如 style.transform = 'rotate(25deg)'），然后监听 mousedown 或 touchstart 来获取点击坐标时，桌面端用 event.layerX / event.layerY 还能凑合，但移动端 TouchEvent 压根就不支持这两个属性——touches[0].clientX/Y 在变换后的坐标系里根本对不上，直接导致绘制或碰撞检测全跑偏。

解决方案：Pointer Events API 配合 offsetX/offsetY

这个问题其实有个干净利落的解法：用 Pointer Events API。推荐用 pointerdown 替代 mousedown + touchstart 的混乱组合，然后直接用 e.offsetX / e.offsetY 拿坐标。这两个属性表示触发点相对于目标元素内容区域左上角的偏移，而且——关键在这里——它们会自动考虑 CSS transform 的影响。不管你是旋转、缩放还是平移，返回的值都是视觉上对应的位置，在 Chrome、Firefox、Safari（iOS 13.4+）、Edge 等主流浏览器里都表现一致。

代码示例

来个示例就清楚了：

const canvas = document.getElementById('myCanvas');
canvas.addEventListener('pointerdown', (e) => {
  //  安全、统一、旋转感知的坐标
  const x = e.offsetX;
  const y = e.offsetY;
  console.log(`点击位置（相对于旋转后 canvas）: (${x.toFixed(1)}, ${y.toFixed(1)})`);
  // 后续可直接用于 canvas 2D 绘图或碰撞检测等逻辑
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(x, y, 4, 0, Math.PI * 2);
  ctx.fill();
});

实操注意事项

• 用了 pointerdown 就别再同时绑 touchstart 或 mousedown，否则会有重复事件——Pointer Events 自己会统一处理底层输入。
• 如果非要在老古董（IE 11 以下、极旧 Android 浏览器）上跑，那得准备降级方案，比如手动做矩阵逆变换。不过眼下绝大多数现代设备已经完全够用。
• offsetX/offsetY 是基于元素的 border box 内边缘 来算的。如果 Canvas 设了 padding，原点就在 padding 区域的左上角——所以最好保持 padding: 0，避免不必要的混淆。
• 如果你需要的是 Canvas 逻辑像素坐标（也就是画图时真正用的），offsetX/Y 已经考虑了缩放和旋转，通常直接拿来用就行。但有一种特殊情况：Canvas 的 width/height 属性和 CSS 渲染尺寸不一致（比如拉伸渲染），这时就得按比例校正一下：
  

  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  const canvasX = (e.offsetX - rect.left) * scaleX;
  const canvasY = (e.offsetY - rect.top) * scaleY;

总结：推荐使用 pointer* 事件

说到底，别再费劲拆成 mouse* 和 touch* 两套监听方案了——拥抱 pointer* 事件才是做响应式 Canvas 交互的正经路子。它不仅能一劳永逸地解决旋转坐标难题，还天然支持触控笔、鼠标、多点触摸，代码更干净，维护起来也省心得多。