Question

我正在使用html5画布+一些javascript（onmousedown / move / up）在网页上创建简单的绘图板。

在Opera，Firefox，Chrome等中运行正常（在台式机上试用）。但是如果我用iPhone访问这个页面，当试图在画布上绘图时，它会拖动或滚动页面。

这适用于其他页面内容，通过向下滑动页面，您可以像往常一样在移动浏览器中浏览页面。但有没有办法在画布上禁用此行为，以便移动访问者可以在其上实际绘制内容？

供您参考，这是一个简洁的例子：

<html><head><script type='text/javascript'>
function init()
{
  var canvas = document.getElementById('MyCanvas');
  var ctx = canvas.getContext('2d');
  var x = null;
  var y;
  canvas.onmousedown = function(e)
  {
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    ctx.beginPath();
    ctx.moveTo(x,y);
  }
  canvas.onmouseup = function(e)
  {
    x = null;
  }  
  canvas.onmousemove = function(e)
  {
    if (x==null) return;
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetLeft;
    ctx.lineTo(x,y);
    ctx.stroke();
  }  
}
</script></head><body onload='init()'>
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'>
</canvas></body></html>

我是否需要在画布中添加一些特殊的样式或事件，以避免在画布中滑动时拖动/滚动页面？

Answer 1

iPad / iPhone没有鼠标*事件。您需要使用touchstart，touchmove和touchend。这个事件可以有多个触摸，所以你需要得到这样的第一个：

canvas.ontouchstart = function(e) {
  if (e.touches) e = e.touches[0];
  return false;
}

触摸启动方法中return false非常重要，否则会触发页面滚动。

Answer 2

我将通过添加指向该答案的链接来添加到Grassator的答案，该链接将更深入地介绍使该解决方案有效所需的代码：https://stackoverflow.com/a/16630678/5843693。

画布的所有方法都以抽屉方式调用，如下所示：

var drawer = {
   isDrawing: false,
   touchstart: function (coors) {
      ctx.beginPath();
      ctx.moveTo(coors.x, coors.y);
      this.isDrawing = true;
   },
   touchmove: function (coors) {
      if (this.isDrawing) {
         ctx.lineTo(coors.x, coors.y);
         ctx.stroke();
      }
   },
   touchend: function (coors) {
      if (this.isDrawing) {
         this.touchmove(coors);
         this.isDrawing = false;
      }
   }
};

此外，对EventListener进行了特殊排序，以便首先进行触摸输入：

var touchAvailable = ('createTouch' in document) || ('onstarttouch' in window);

if (touchAvailable) {
   canvas.addEventListener('touchstart', draw, false);
   canvas.addEventListener('touchmove', draw, false);
   canvas.addEventListener('touchend', draw, false);
} else {
   canvas.addEventListener('mousedown', draw, false);
   canvas.addEventListener('mousemove', draw, false);
   canvas.addEventListener('mouseup', draw, false);
}

最后，通过在代码结尾处再添加一个EventListener来防止“弹性”滚动。

document.body.addEventListener('touchmove', function (event) {
   event.preventDefault();
}, false);

所有这些都放在window.addEventListener('load', function () {})内。

javascript + html5 canvas：在移动设备上绘图而不是拖动/滚动？

2 个答案: