如何使我的Canvas适应触摸事件?

我的Canvas当前可以通过鼠标事件正确绘制,但是我想让它运行于触摸事件,有没有办法在不中断代码的情况下完成它?

我已经尝试了一些触摸事件,但是真的没有运气,所以欢迎任何帮助。

$( document ).ready(function() {
  var container = document.getElementById('canvas');
  init(container,200,'#ddd');

  function init(container,width,height,fillColor) {
    var canvas = createCanvas(container,height);
    var ctx = canvas.getcontext('2d');

    var mouse = {x: 0,y: 0};
    var last_mouse = {x: 0,y: 0};

    canvas.addEventListener('mousemove',function(e) {
      last_mouse.x = mouse.x;
      last_mouse.y = mouse.y; 

      if (e.offsetX) {
        mouse.x = e.offsetX;
        mouse.y = e.offsetY;
      }
    });    

    canvas.onmousemove = function(e) {
      /* If nobody is drawing */
      if (!canvas.isDrawing) {
        return;
      }

      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
    };

    canvas.addEventListener('mousedown',function(e) {
      canvas.addEventListener('mousemove',onPaint,false);
    },false);

    canvas.addEventListener('mouseup',function() {
      canvas.removeEventListener('mousemove',false);
    });

    canvas.addEventListener('touchstart',function(e) {
      canvas.addEventListener('touchmove',false);

    var onPaint = function() {
      ctx.beginPath();
      ctx.moveTo(last_mouse.x,last_mouse.y);
      ctx.lineTo(mouse.x,mouse.y);
      ctx.closePath();
      ctx.stroke();

      ctx.lineWidth = 15 ;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'black';
    };
  }
q00120994 回答:如何使我的Canvas适应触摸事件?

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3123438.html

大家都在问