本文介绍如何通过 Pointer Events API 解决旋转 Canvas（如 transform: rotate(25deg)）下移动端 touchstart 缺乏 layerX/layerY 导致坐标计算失准的问题，推荐使用 pointerdown + offsetX/offsetY 实现跨设备、跨浏览器的坐标一致性。
本文介绍如何通过 pointer events api 解决旋转 canvas（如 `transform: rotate(25deg)`）下移动端 `touchstart` 缺乏 `layerx/layery` 导致坐标计算失准的问题，推荐使用 `pointerdown` + `offsetx/offsety` 实现跨设备、跨浏览器的坐标一致性。
在 Web 开发中，当对
✅ 正确解法是弃用 touchstart / mousedown 分离监听，统一迁移到 Pointer Events：
- pointerdown（替代 touchstart 和 mousedown）
- pointermove（替代 touchmove 和 mousemove）
- pointerup（替代 touchend 和 mouseup）
Pointer Events 是现代浏览器广泛支持的标准（Chrome 55+、Firefox 59+、Safari 13.1+、Edge 全版本），其 offsetX 和 offsetY 属性自动适配 CSS transform（包括 rotate、scale、skew、translate），直接返回相对于目标元素内容边界框（padding-box）左上角的坐标，无需手动矩阵逆变换或 DOM 矩阵计算。
以下是可直接复用的示例代码：
<canvas id="myCanvas" width="400" height="300" style="transform: rotate(25deg); border: 1px solid #ccc;"></canvas>
const canvas = document.getElementById('myCanvas');
// ✅ 推荐：统一监听 pointerdown
canvas.addEventListener('pointerdown', (e) => {
// offsetX/Y 自动适配旋转，单位为 CSS 像素（已考虑 devicePixelRatio）
const x = e.offsetX;
const y = e.offsetY;
console.log(`点击位置（相对于旋转后的画布）: (${x.toFixed(2)}, ${y.toFixed(2)})`);
// 后续可直接用于 canvas 2D 绘图上下文（注意：canvas 坐标系原点在左上角，无需额外翻转）
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, y, 6, 0, Math.PI * 2);
ctx.fill();
});
// 可选：禁用默认触摸行为以避免延迟和滚动干扰
canvas.addEventListener('pointerdown', e => {
if (e.pointerType === 'touch') e.preventDefault();
}, { passive: false });
⚠️ 注意事项：
- offsetX / offsetY 在 pointerenter / pointerleave 中不可用，仅适用于 pointerdown / pointermove / pointerup；
- 若需兼容 IE11，请使用 msPointerDown 前缀（已废弃，不建议新项目投入）；
- offsetX/Y 基于元素 padding-box，若 Canvas 设置了 padding，坐标原点会从 padding 内侧开始计算（通常 Canvas 不设 padding，故可忽略）；
- 对于高 DPI 屏幕（如 Retina），offsetX/Y 返回的是 CSS 像素值，与 canvas.width/height（逻辑像素）一致；若需绘制到物理像素，仍需结合 window.devicePixelRatio 缩放绘图操作——但坐标获取本身无需缩放。
总结：面对旋转 Canvas 的跨端坐标难题，Pointer Events 不仅简化了事件处理逻辑，更通过标准化的 offsetX / offsetY 提供了开箱即用的 transform 感知能力。相比手动解析 getComputedStyle、调用 canvas.getBoundingClientRect() 并执行逆仿射变换，该方案更简洁、健壮且性能更优。
