解决Canvas绘图应用在移动端触摸事件失效的问题

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

  // 优先处理触摸事件
  if (event.touches && event.touches[0]) {
    const touch = event.touches[0];
    const rect = event.target.getBoundingClientRect(); // 获取Canvas元素在视口中的位置
    offsetX = touch.clientX - rect.left;
    offsetY = touch.clientY - rect.top;
  } else {
    // 处理鼠标事件
    offsetX = event.offsetX;
    offsetY = event.offsetY;
  }
  return [offsetX, offsetY];
};

// 获取Canvas元素及其2D渲染上下文
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; // 标记是否正在绘图

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

  // 优先处理触摸事件
  if (event.touches && event.touches[0]) {
    const touch = event.touches[0];
    const rect = event.target.getBoundingClientRect(); // 获取Canvas元素在视口中的位置
    offsetX = touch.clientX - rect.left;
    offsetY = touch.clientY - rect.top;
  } else {
    // 处理鼠标事件
    offsetX = event.offsetX;
    offsetY = event.offsetY;
  }
  return [offsetX, offsetY];
};

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

/**
 * 开始绘图
 * @param {Event} event 鼠标或触摸事件对象
 */
const startDrawing = event => {
  event.preventDefault(); // 阻止默认的触摸行为（如滚动、缩放）
  isMouseDown = true;
  [x, y] = getXY(event); // 获取起始坐标
};

/**
 * 绘制线条
 * @param {Event} event 鼠标或触摸事件对象
 */
const drawLine = event => {
  if (isMouseDown) {
    event.preventDefault(); // 阻止默认的触摸行为
    const [newX, newY] = getXY(event); // 获取当前坐标
    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;
}