画笔工具在移动端无法正常绘制，是事件没处理好吗？

Top丶玉翠提问于 2026-03-12 14:01:19 阅读 42

交互

我用 canvas 做了个简单的画笔工具，在电脑上用鼠标能正常画，但一到手机上就完全没反应。

我只监听了 mousedown、mousemove 和 mouseup，是不是得加 touch 事件？试过加 touchstart 但还是不行，坐标好像也对不上。

这是我的事件绑定部分：

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);

我来解答赞 7 收藏

反馈

1 条解答

FSD-永穗 Lv1

对，得用touch事件，而且坐标要取e.touches[0]。还有一点：touch事件要preventDefault()否则会触发滚动导致画不了。

function getPos(e) {

  const touch = e.touches ? e.touches[0] : e;

  return {

    x: touch.clientX - canvas.offsetLeft,

    y: touch.clientY - canvas.offsetTop

  };

}



canvas.addEventListener('mousedown', startDrawing);

canvas.addEventListener('mousemove', draw);

canvas.addEventListener('mouseup', stopDrawing);



canvas.addEventListener('touchstart', (e) => {

  e.preventDefault(); // 阻止滚动

  startDrawing(getPos(e));

});

canvas.addEventListener('touchmove', (e) => {

  e.preventDefault();

  draw(getPos(e));

});

canvas.addEventListener('touchend', stopDrawing);

2026-03-12 14:06