Dessiner sur une toile via la souris et appuyez sur

Question

Je veux dessiner sur une toile, fonctionne très bien avec une souris, mais comment dois-je modifier le code pour le faire fonctionner sur iPad ou Nexus?

[link] http://jsfiddle.net/FgNQk/6/

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); 

Answer 1

Les événements que vous devez utiliser sont touchstart, touchend et touchmove, qui doit correspondre aux fonctions ci-dessus. Je ne sais pas si les événements peuvent être empilés aussi facilement dans la plaine JS comme jQuery, mais vous devriez être en mesure de soutenir la souris et le toucher soit en tournant chaque événement en fonctions:

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);