javascript + html5 canvas：在移動設備上繪圖而不是拖動/滾動？

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 。

在我繼續之前，請注意Apple已經改變了iOS在更新設備上滾動的方式。 要處理此更改，有必要添加一些額外的功能; 感謝Christopher Vickers分享這個：

function preventDefault(e) {
    e.preventDefault();
}
function disableScroll() {
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll() {
    document.body.removeEventListener('touchmove', preventDefault);
}

畫布的方法都以抽屜方式調用，如下所示：

var drawer = {
   isDrawing: false,
   touchstart: function (coors) {
      ctx.beginPath();
      ctx.moveTo(coors.x, coors.y);
      this.isDrawing = true;
      disableScroll(); // add for new iOS support
   },
   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;
      }
      enableScroll(); // add for new iOS support
   }
};

此外， 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 個解決方案

解決方案1
7 已采納 2012-04-02 11:57:22

解決方案2
1 2019-07-17 12:43:45

javascript + html5 canvas：在移動設備上繪圖而不是拖動/滾動？

問題描述

2 個解決方案

解決方案1 7 已采納 2012-04-02 11:57:22

解決方案2 1 2019-07-17 12:43:45

解決方案1
7 已采納 2012-04-02 11:57:22

解決方案2
1 2019-07-17 12:43:45