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

0

events 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 また、タスクがより複雑になる場合は、mousedown+ mouseup+ click(非タッチ サイトとの互換性のためです) を使用Event.preventDefault()すると、実際のタッチ イベントに対して一時的にこの動作を無効にすることができます。

于 2020-02-12T09:38:32.280 に答える