桌面正常的Canvas绘画APP在移动端浏览器无法作画求助

你的Canvas绘画应用在桌面正常但移动端失效，核心问题出在触摸事件的坐标处理和默认行为干扰上，以下是具体原因和修复方案：

问题根源 #

1. 触摸事件无offsetX/offsetY属性：你当前代码依赖鼠标事件的offsetX/offsetY获取相对Canvas的坐标，但触摸事件对象里没有这两个属性，导致无法正确获取绘画起点和路径点。
2. 未阻止触摸默认行为：移动端触摸时，浏览器会触发滚动、缩放等默认行为，打断绘画操作，甚至导致事件无法正常触发。

修复方案 #

1. 封装坐标获取函数，兼容鼠标与触摸事件 #

新增一个工具函数，统一处理两种事件的坐标转换，计算相对于Canvas的位置：

const getCanvasRelativeCoords = (event) => {
  const rect = paintCanvas.getBoundingClientRect();
  let clientX, clientY;

  // 区分触摸事件和鼠标事件
  if (event.type.includes('touch')) {
    // 触摸事件取第一个触摸点的坐标
    const touch = event.touches[0] || event.changedTouches[0];
    clientX = touch.clientX;
    clientY = touch.clientY;
  } else {
    clientX = event.clientX;
    clientY = event.clientY;
  }

  // 计算相对于Canvas左上角的坐标
  return {
    x: clientX - rect.left,
    y: clientY - rect.top
  };
}

2. 修改绘画相关函数，适配触摸事件 #

更新startDrawing和drawLine函数，使用上面的工具函数获取坐标，并阻止触摸默认行为：

const startDrawing = event => {
  // 阻止触摸默认行为，避免页面滚动干扰
  event.preventDefault();
  isMouseDown = true;
  const coords = getCanvasRelativeCoords(event);
  x = coords.x;
  y = coords.y;
}

const drawLine = event => {
  if (isMouseDown) {
    event.preventDefault();
    const coords = getCanvasRelativeCoords(event);
    const newX = coords.x;
    const newY = coords.y;
    context.beginPath();
    context.moveTo(x, y);
    context.lineTo(newX, newY);
    context.stroke();
    x = newX;
    y = newY;
  }
}

3. （可选）修复移动端绘画模糊问题 #

如果发现移动端绘画线条模糊，是因为高DPI屏幕的适配问题，可添加以下代码：

// 适配高分辨率屏幕
const scale = window.devicePixelRatio || 1;
// 放大Canvas实际像素尺寸
paintCanvas.width = 200 * scale;
paintCanvas.height = 200 * scale;
// 缩放绘图上下文，保证绘制内容比例正确
context.scale(scale, scale);
// 保持Canvas显示尺寸不变
paintCanvas.style.width = '200px';
paintCanvas.style.height = '200px';

完整修复后的JavaScript代码 #

const paintCanvas = document.querySelector('.js-paint');
const context = paintCanvas.getContext('2d');
context.lineCap = 'round';

// 适配高DPI屏幕（可选）
const scale = window.devicePixelRatio || 1;
paintCanvas.width = 200 * scale;
paintCanvas.height = 200 * scale;
context.scale(scale, scale);
paintCanvas.style.width = '200px';
paintCanvas.style.height = '200px';

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 getCanvasRelativeCoords = (event) => {
  const rect = paintCanvas.getBoundingClientRect();
  let clientX, clientY;

  if (event.type.includes('touch')) {
    const touch = event.touches[0] || event.changedTouches[0];
    clientX = touch.clientX;
    clientY = touch.clientY;
  } else {
    clientX = event.clientX;
    clientY = event.clientY;
  }

  return {
    x: clientX - rect.left,
    y: clientY - rect.top
  };
}

const stopDrawing = () => {
  isMouseDown = false;
}

const startDrawing = event => {
  event.preventDefault();
  isMouseDown = true;
  const coords = getCanvasRelativeCoords(event);
  x = coords.x;
  y = coords.y;
}

const drawLine = event => {
  if (isMouseDown) {
    event.preventDefault();
    const coords = getCanvasRelativeCoords(event);
    const newX = coords.x;
    const newY = coords.y;
    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);

paintCanvas.addEventListener("touchstart", startDrawing);
paintCanvas.addEventListener("touchend", stopDrawing);
paintCanvas.addEventListener("touchcancel", stopDrawing);
paintCanvas.addEventListener("touchmove", drawLine);

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