HTML5 Canvas适配Apple Pencil设置position:absolute后笔触偏移求助

问题根因 #

• 未重置页面默认边距：body默认自带8px外边距，导致absolute定位的canvas实际渲染位置与视口左上角存在偏移
• 坐标计算逻辑错误：直接使用pageX/Y（相对于文档左上角的坐标）作为canvas内部绘制坐标，未扣除canvas元素自身在视口中的偏移量
• 硬编码缩放比例：写死2倍分辨率适配，没有适配不同设备的devicePixelRatio，不同设备下会出现比例错位

具体修复步骤 #

1. 修正CSS配置，消除默认边距影响

/* 新增全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 禁止页面滚动，避免滚动偏移影响坐标计算 */
}
/* 原有canvas配置保留 */
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

2. 替换坐标计算逻辑，动态适配设备分辨率

首先新增公共坐标转换函数，避免重复代码：

// 统一处理坐标转换
function getCanvasCoordinates(e) {
  const rect = canvas.getBoundingClientRect();
  const dpr = window.devicePixelRatio;
  let clientX, clientY;
  if (e.touches && e.touches[0]) {
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
  } else {
    clientX = e.clientX;
    clientY = e.clientY;
  }
  // 计算canvas内部的实际绘制坐标
  const x = (clientX - rect.left) * dpr;
  const y = (clientY - rect.top) * dpr;
  return { x, y };
}

然后修改canvas初始化的分辨率配置，删除硬编码的2倍缩放：

// 替换原有canvas宽高赋值逻辑
const dpr = window.devicePixelRatio;
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;

最后将所有事件（touchstart/mousedown/touchmove/mousemove/touchend）中原来的x、y赋值代码，全部替换为调用公共函数获取坐标：

// 示例：替换所有事件内的x、y计算逻辑
const { x, y } = getCanvasCoordinates(e);

3. 可选：新增窗口大小变化适配

避免窗口缩放后再次出现错位：

window.addEventListener('resize', () => {
  const dpr = window.devicePixelRatio;
  canvas.width = window.innerWidth * dpr;
  canvas.height = window.innerHeight * dpr;
  // 若需要保留历史笔迹，可在此处补充strokeHistory的重绘逻辑
})

内容的提问来源于stack exchange，提问作者Paul Walker