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

用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也可以。

3个回答

刚好前两天写了一个这样的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');
IT_NQR
IT_年轻人 回复yanzhi_2016: 可以。 你如果方便可以加我QQ 810663949。
一年多之前 回复
yanzhi_2016
yanzhi_2016 回复IT_年轻人: 能看下你代码吗
一年多之前 回复
yanzhi_2016
yanzhi_2016 回复IT_年轻人: 就是这样的,实时记录轨迹。弧线也可以画,你看油的勾就是弧线。你是觉得线条不够圆润吗?
一年多之前 回复
IT_NQR
IT_年轻人 我刚才试了一下,线是不断,但出来的都是 直线。我不确定是我方式不对,还是你的代码只能用在直线上面
一年多之前 回复
IT_NQR
IT_年轻人 我上面展示的效果图片是在PC端实时查看的效果,我在手机上面无论滑动多快 线都是连在一起的。你提供的代码只能画直线吗?还是弧线也可以。
一年多之前 回复

其一是要想获取触控的属性(坐标),首先要获取触控的对象,移动端多个指针,PC端只有一个指针,所以要取所有手指e.touches[x]; 其二是触摸时浏览器有个默认的事件,这个事件会阻断你的所有操作。所以在操作之前要先把默认事件除掉evt.preventDefault();否则怪异现象层出不穷。 其三是手机端可以addEventListener事件绑定,PC用ontouchmove,ontouchstart,ontouchend。

IT_NQR
IT_年轻人 这个链接地址的博主,在几天以前就成为我的微信好友了。他做的是保存之后才展示出图片,我做的实时展示签名轨迹的。百度上我已经搜过好多相关的问题。看过了很多博客。。。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问