Canvas绘图应用移动端兼容性指南：正确处理触控事件

/**
 * 获取事件相对于目标元素的X、Y坐标
 * @param {Event} event 鼠标或触控事件对象
 * @returns {Array<number>} 包含 [offsetX, offsetY] 的数组
 */
const getXY = (event) => {
  let offsetX = event.offsetX;
  let offsetY = event.offsetY;

  // 如果是触控事件，则通过 touches 属性计算坐标
  if (event.touches && event.touches[0]) {
    const rect = event.target.getBoundingClientRect(); // 获取目标元素（Canvas）在视口中的位置和大小
    offsetX = event.touches[0].clientX - rect.left;
    offsetY = event.touches[0].clientY - rect.top;
  }
  return [offsetX, offsetY];
};

const paintCanvas = document.querySelector('.js-paint');
const context = paintCanvas.getContext('2d');
context.lineCap = 'round'; // 设置线条端点样式为圆形

const colorPicker = document.querySelector('.js-color-picker');
colorPicker.addEventListener('change', event => {
  context.strokeStyle = event.target.value; // 更新画笔颜色
});

const lineWidthRange = document.querySelector('.js-line-range');
const lineWidthLabel = document.querySelector('.js-range-value');
lineWidthRange.addEventListener('input', event => {
  const width = event.target.value;
  lineWidthLabel.innerHTML = width;
  context.lineWidth = width; // 更新画笔宽度
});

let x = 0, y = 0; // 当前绘图起点坐标
let isMouseDown = false; // 标记是否正在绘图

// 停止绘图
const stopDrawing = () => {
  isMouseDown = false;
};

// 开始绘图
const startDrawing = event => {
  event.preventDefault(); // 阻止默认的触控行为（如滚动、缩放）
  isMouseDown = true;
  [x, y] = getXY(event); // 使用 getXY 获取起始坐标
};

// 绘制线条
const drawLine = event => {
  if (isMouseDown) {
    event.preventDefault(); // 阻止默认的触控行为
    const [newX, newY] = getXY(event); // 使用 getXY 获取当前坐标
    context.beginPath(); // 开始一条新路径
    context.moveTo(x, y); // 移动到上一个点
    context.lineTo(newX, newY); // 绘制到当前点
    context.stroke(); // 描边
    x = newX; // 更新上一个点为当前点
    y = newY;
  }
};

// 桌面鼠标事件监听
paintCanvas.addEventListener('mousedown', startDrawing);
paintCanvas.addEventListener('mousemove', drawLine);
paintCanvas.addEventListener('mouseup', stopDrawing);
paintCanvas.addEventListener('mouseout', stopDrawing); // 鼠标离开Canvas时停止绘图

// 移动端触控事件监听
paintCanvas.addEventListener("touchstart", startDrawing);
paintCanvas.addEventListener("touchend", stopDrawing);
paintCanvas.addEventListener("touchcancel", stopDrawing); // 触控中断时停止绘图
paintCanvas.addEventListener("touchmove", drawLine);

// 阻止在绘图过程中意外触发的鼠标滚轮事件（可选，但推荐）
window.addEventListener('mousewheel', (e) => {
  if (isMouseDown) {
    e.preventDefault();
  }
}, { passive: false }); // 设置 passive: false 以确保 preventDefault 生效

<p>
  <input class="js-color-picker  color-picker" type="color" />
  <input class="js-line-range" max="72" min="1" type="range" value="1" />
  <label class="js-range-value">1</label>Px
  <canvas class="js-paint  paint-canvas" height="200" width="200"></canvas>
</p>

.paint-canvas {
  border: 1px black solid;
  display: block;
  margin: 1rem;
}

.color-picker {
  margin: 1rem 1rem 0 1rem;
}