Question

设置绘图画布时遇到一些问题。我的Web应用程序允许用户在画布上绘制一个数字，然后使用机器学习对该数字进行分类。但是，画布在移动设备上不起作用。当我尝试在移动设备上绘画时，什么也没有发生，我只是向上，向下，向左或向右滚动。下面是我的canvas javascript代码，感谢所有帮助。

//window.addEventListener("load", () => {
  const canvas = document.querySelector('#canvas');
  const ctx = canvas.getContext('2d');
  var rect = canvas.getBoundingClientRect();
  ctx.translate(-rect.x, -rect.y);
  let painting = false;

  function startPosition(e) {
    painting = true;
    draw(e);
  }

  function finishedPosition() {
    painting = false;
    ctx.beginPath();
  }

  function draw(e) {
    if (!painting) return;
    ctx.lineWidth = 20;
    ctx.lineCap = 'round';
    ctx.strokeStyle = "black";
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.clientX, e.clientY);
  }

  function translateCanvasResize(e) {
    var rect2 = canvas.getBoundingClientRect();
    ctx.translate(rect.x-rect2.x, rect.y-rect2.y)
    rect = rect2
  }

  function translateCanvasScroll(e) {
    var rect2 = canvas.getBoundingClientRect();
    ctx.translate(rect.x-rect2.x, rect.y-rect2.y)
    rect = rect2
  }
  canvas.addEventListener('mousedown', startPosition);
  canvas.addEventListener('mouseup', finishedPosition);
  canvas.addEventListener('mouseout', finishedPosition);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('touchstart', startPosition);
  canvas.addEventListener('touchend', finishedPosition);
  canvas.addEventListener('touchmove', draw);
  window.addEventListener('resize', translateCanvasResize);
  window.addEventListener('scroll', translateCanvasScroll);
//});

canvas{
  border: 1px solid black;
}

<canvas id=canvas width=500 height=200></canvas>

Answer 1

您需要在触摸事件中致电event.preventDefault：

  function draw(e) {
    e.preventDefault();

绘图画布在移动设备上不起作用，在桌面上可以正常工作

1 个答案: