canvas与webSocket在移动端做电子签名时滑动太快,pc端同步展示时出现断点或者虚线？

Question

用canvas 与 webSocket 做一个在移动端签名并在pc端实时展示签名轨迹的功能
功能实现后发现，如果在签名时滑动太快，触发事件则无法全部响应，导致在pc端展示时出现断点， 虚线等情况。（图片一会上传）。
功能大概的实现方式就是：当touchmove 执行时 获取 x轴与y轴的数值，通过 webSocket的send() 方法传值给后台，后台接到数据以后在返回到 jsp。
滑动代码：
canvas.addEventListener("touchmove", function(e){// 触摸移动中

e.preventDefault(); //阻止屏幕滚动
var x = e.changedTouches[0].clientX - e.target.offsetLeft;
var y = e.changedTouches[0].clientY - e.target.offsetTop;

cxt.lineTo(x,y); //定义线条结束坐标
cxt.strokeStyle=color; //线条颜色
cxt.fillStyle = color; //填充颜色
var fromName = self;
var toName = $("#userlist").val(); //发给谁
var type = "coord";
var content = x+'_'+y;
var msg = fromName + "," + toName + "," + content + "," + type;
ws.send(msg);//传值给后台

cxt.stroke();//画出线条方法。
}, false)
展示图片代码
ws.onmessage = function(evt) {
var data = evt.data;
var o = eval('(' + data + ')');//将字符串转换成JSON
var oGC = oC.getContext('2d');
var coordArry = o.data.split("_");//接后台传的值

var x = coordArry[0];//通过 x轴与 y轴 出现签名笔记

var y = coordArry[1];
oGC.moveTo(x-1,y-1);
oGC.lineTo(x,y);
oGC.lineWidth = 1;

oGC.stroke();
};
移动端展示(移动端滑动快慢都不会出现断点)

滑动太快时PC端展示效果

    本人 H5 与 JS 都是菜鸟一枚，希望各位大神回帖的时候能详细的说一下。尽量给予直接的代码帮助。如果觉得40C币，有点少我在加40C也可以。

Answer 1

刚好前两天写了一个这样的demo，出现虚线的原因是touchmove事件的触发不是连续的。

  class Pad {
    constructor (el) {
      let cvs = document.getElementById(el);
      this.ctx = cvs.getContext('2d');
      this.clientX = 0;
      this.clientY = 0;
      cvs.addEventListener('touchstart', e => {
        let x = e.changedTouches[0].clientX - e.target.offsetLeft;
        let y = e.changedTouches[0].clientY - e.target.offsetTop;
        // 记下落笔时的的坐标
        this.clientX = x;
        this.clientY = y;
      })
      cvs.addEventListener('touchmove', e => {
        let x = e.changedTouches[0].clientX - e.target.offsetLeft;
        let y = e.changedTouches[0].clientY - e.target.offsetTop;
        // 绘制路径
        this.stroke(x, y);
        // 记下移动轨迹的坐标
        this.clientX = x;
        this.clientY = y;
      })
    }
    stroke(startX, startY) {
      /**
       * touchmove不是连续触发的，所以想要画出连续的线，只要将上一次touchmove触发时的坐标和当前touchmove触发时的的坐标连成线就可以了
       * */
      this.ctx.beginPath();
      this.ctx.lineWidth = 5;
      this.ctx.moveTo(startX, startY);
      this.ctx.lineTo(this.clientX, this.clientY);
      this.ctx.stroke();
      this.ctx.closePath();
    }
  }
  new Pad('myCanvas');