6

我想在画布上画画，用鼠标效果很好，但是我要如何修改代码才能让它在 iPad 或 Nexus 上运行呢？

关联

 var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var width  = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;

    canvas.addEventListener('mousedown', function(e) {
        this.down = true;   
        this.X = e.pageX ;
        this.Y = e.pageY ;
    }, 0);

    canvas.addEventListener('mouseup', function() {
        this.down = false;          
    }, 0);

    canvas.addEventListener('mousemove', function(e) {
      
        if(this.down) {
             with(ctx) {
                beginPath();
                moveTo(this.X, this.Y);
                lineTo(e.pageX , e.pageY );
                ctx.lineWidth=1;
                stroke();
             }
             this.X = e.pageX ;
             this.Y = e.pageY ;
        }
    }, 0);
4

3 回答 3

2

您需要使用的事件是touchstart、touchend和touchmove，它们应该与上面的函数相对应。我不知道在普通 JS 中是否可以像在 jQuery 中那样轻松地堆叠事件，但是您应该能够通过将每个事件转换为函数来同时支持鼠标和触摸：

var myMoveEvent = function (e) {
    if(this.down) {
         with(ctx) {
            beginPath();
            moveTo(this.X, this.Y);
            lineTo(e.pageX , e.pageY );
            ctx.lineWidth=1;
            stroke();
         }
         this.X = e.pageX ;
         this.Y = e.pageY ;
    }
}

canvas
    .addEventListener('mousemove', function(e) {
        myMoveEvent(e);
    }, 0)
    .addEventListener('touchmove', function(e) {
        myMoveEvent(e);
    }, 0);
于 2013-04-17T19:03:40.470 回答
1

这是一个用于绘制鼠标和触摸事件的 HTML 文件。

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><script type='text/javascript'>
window.addEventListener('load', function () {
  // get the canvas element and its context
  var canvas = document.getElementById('sketchpad');
  var context = canvas.getContext('2d');
  var isIdle = true;
  function drawstart(event) {
    context.beginPath();
    context.moveTo(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
    isIdle = false;
  }
  function drawmove(event) {
    if (isIdle) return;
    context.lineTo(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
    context.stroke();
  }
  function drawend(event) {
    if (isIdle) return;
    drawmove(event);
    isIdle = true;
  }
  function touchstart(event) { drawstart(event.touches[0]) }
  function touchmove(event) { drawmove(event.touches[0]); event.preventDefault(); }
  function touchend(event) { drawend(event.changedTouches[0]) }

  canvas.addEventListener('touchstart', touchstart, false);
  canvas.addEventListener('touchmove', touchmove, false);
  canvas.addEventListener('touchend', touchend, false);        

  canvas.addEventListener('mousedown', drawstart, false);
  canvas.addEventListener('mousemove', drawmove, false);
  canvas.addEventListener('mouseup', drawend, false);

}, false); // end window.onLoad
</script></head><body  encoding='utf8'>
  <canvas id='sketchpad' width='500' height='500' style='border:1px solid #777'/>
</body></html>
于 2020-05-08T17:45:39.743 回答
0

使用事件touchstart,touchend和touchmove，但比较复杂，因为坐标不在 pageX 和 pageY 中，而是所有手指坐标都在数组中：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width  = window.innerWidth;
var height = window.innerHeight;
canvas.height = height;
canvas.width = width;

canvas.addEventListener('touchstart', function(e) {
  this.down = true;   
  this.X = e.touches[0].pageX ;
  this.Y = e.touches[0].pageY ;
}, 0);

canvas.addEventListener('touchend', function() {
  this.down = false;          
}, 0);

canvas.addEventListener('touchmove', function(e) {
  if(this.down) {
    with(ctx) {
      beginPath();
      moveTo(this.X, this.Y);
      lineTo(e.touches[0].pageX , e.touches[0].pageY );
      ctx.lineWidth=1;
      stroke();
    }
    this.X = e.touches[0].pageX ;
    this.Y = e.touches[0].pageY ;
  }
}, 0);

但这并不能解决常见问题，使其同时兼容鼠标和触摸。我搜索了解决方案并找到了这个解决方案，如果您有兴趣：http ://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html 另外，如果任务会更复杂，您必须找到默认智能手机浏览器行为的解决方案，即当触发 touchstart 浏览器时也会触发其他事件mousedown+ mouseup+ click（这是为了与非触摸站点兼容）。使用Event.preventDefault()可以为实际的触摸事件暂时禁用此行为。

于 2020-02-12T09:38:32.280 回答