点击和拖动功能在移动设备上不起作用

Question

我已经为此苦苦挣扎了一段时间了，希望对您有所帮助。 下面的代码可在桌面上完美运行。这是一个单击和拖动功能，它使用鼠标向上/向下事件侦听器进行工作。 但是，我无法在移动设备上使用它。我尝试添加“触摸开始和触摸结束”，但仍然无法正常工作。有什么方法可以使它在移动设备上工作？

 // Application variables
    var position = {x: 0, y: window.innerHeight/2};
    var counter = 0;
    var minFontSize = 3;
    var angleDistortion = 0;
    var letters = "zzz";
    
    // Drawing variables
    var canvas;
    var context;
    var mouse = {x: 0, y: 0, down: false}
    
    function init() {
      canvas = document.getElementById( 'canvas' );
      context = canvas.getContext( '2d' );
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
     
      canvas.addEventListener('mousemove', mouseMove, false);
      canvas.addEventListener('mousedown', mouseDown, false);
      canvas.addEventListener('mouseup',   mouseUp,   false);
      canvas.addEventListener('mouseout',  mouseUp,  false);  
      canvas.addEventListener('dblclick', doubleClick, false);
      
     
      window.onresize = function(event) {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      }
    }
    
    function mouseMove ( event ){
      mouse.x = event.pageX; 
      mouse.y = event.pageY; 
      draw();
    }
    
    function draw() {
     if ( mouse.down ) {
        var d = distance( position, mouse );
        var fontSize = minFontSize + d/2;
        var letter = letters[counter];
        var stepSize = textWidth( letter, fontSize );
       
        if (d > stepSize) {
          var angle = Math.atan2(mouse.y-position.y, mouse.x-position.x);
         
          context.font = fontSize + "px Great Vibes";
       
          context.save();
          context.translate( position.x, position.y);
          context.rotate( angle );
          context.fillText(letter,0,0);
          context.restore();
    
          counter++;
          if (counter > letters.length-1) {
            counter = 0;
          }
       
        //console.log (position.x + Math.cos( angle ) * stepSize)
          position.x = position.x + Math.cos(angle) * stepSize;
          position.y = position.y + Math.sin(angle) * stepSize;
    
          }
      }    
    }
    
    function distance( pt, pt2 ){
     
      var xs = 0;
      var ys = 0;
     
      xs = pt2.x - pt.x;
      xs = xs * xs;
     
      ys = pt2.y - pt.y;
      ys = ys * ys;
     
      return Math.sqrt( xs + ys );
    }
    
    function mouseDown( event ){
      mouse.down = true;
      position.x = event.pageX;
      position.y = event.pageY;
     
      document.getElementById('info').style.display = 'none';
    }
    
    function mouseUp( event ){
        mouse.down = false;
    }
    
    function doubleClick( event ) {
      canvas.width = canvas.width;
    }
    
    function textWidth( string, size ) {
      context.font = size + "px Great Vibes";
     
      if ( context.fillText ) {
        return context.measureText( string ).width;
      } else if ( context.mozDrawText) {
        return context.mozMeasureText( string );
      }
     
     };
    
    init();