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 + ')');//将字符串转换成JSONvar 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

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