触摸移动事件不正确

我忙于创build一个小型的实时绘图应用程序,并试图创build一个触摸屏系统卡住了。 这是部分工作,但当我触摸和移动线连接到最后一行。

这是我的代码:

document.addEventListener("DOMContentLoaded", function() { var mouse = { click: false, move: false, pos: {x:0, y:0}, pos_prev: false, colour: "blue" }; var canvas = document.getElementById('drawing'); var ctx = canvas.getContext('2d'); var width = window.innerWidth; var height = window.innerHeight; var socket = io.connect(); canvas.width = width; canvas.height = height; /* window.onresize= function(){ var width = window.innerWidth; var height = window.innerHeight; console.log(height); canvas.style.width = width; canvas.style.height = height; }; */ canvas.onmousedown = function(e){ mouse.click = true; }; canvas.onmouseup = function(e){ mouse.click = false; }; canvas.ontouchstart = function(e){ mouse.click = true; }; canvas.ontouchend = function(e){ mouse.click = false; }; canvas.onmousemove = function(e) { mouse.pos.x = e.clientX / width; mouse.pos.y = e.clientY / height; mouse.pos.w = document.getElementById("rag").value; mouse.move = true; }; canvas.ontouchmove = function(e) { var touch = e.touches[0]; var x = touch.pageX - canvas.offsetLeft; var y = touch.pageY - canvas.offsetTop; mouse.pos.x = x / width; mouse.pos.y = y / height; console.log(mouse.pos.x); mouse.pos.w = document.getElementById("rag").value; mouse.move = true; }; socket.on('draw_line', function (data) { var line = data.line; ctx.strokeStyle = line[2]; ctx.lineWidth = line[0].w; ctx.beginPath(); ctx.moveTo(line[0].x * width, line[0].y * height); ctx.lineTo(line[1].x * width, line[1].y * height); ctx.stroke(); }); socket.on('clear', function () { ctx.clearRect(0,0,width,height); }); function mainLoop() { if (mouse.click && mouse.move && mouse.pos_prev) { mouse.colour = document.getElementById("col").value; socket.emit('draw_line', { line: [ mouse.pos, mouse.pos_prev, mouse.colour]}); mouse.move = false; } mouse.pos_prev = {x: mouse.pos.x, y: mouse.pos.y}; setTimeout(mainLoop, 20); } mainLoop(); }); 

一个生活的例子可以在这里find:

http://80.61.54.121:88/

有谁知道如何解决与eacother连接的线? 提前致谢。