Javascript html5画布绘图在平板电脑上变得参差不齐

这是我的密码：

var can = $('#signature')[0],
    ctx = can.getContext('2d'),
    mousePressed = false,
    mouseX = 0,
    mouseY = 0;
can.addEventListener('touchmove', onTouchMove, false);
can.addEventListener('touchstart', onTouchStart, false);
can.addEventListener('touchend', onMouseUp, false);
// Tablet
function onTouchMove(event){
    if (mousePressed) {
        event.preventDefault();
        mouseX = (event.targetTouches[0].pageX) - can.offsetLeft;
        mouseY = (event.targetTouches[0].pageY) - can.offsetTop;
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();
    }
}

function onTouchStart(event){
    mousePressed = true;
    mouseX = (event.targetTouches[0].pageX) - can.offsetLeft;
    mouseY = (event.targetTouches[0].pageY) - can.offsetTop;
    ctx.beginPath();
    ctx.moveTo(mouesX, mouseY);
}

function onMouseUp(event){
    mousePressed = false;
}
// Desktop
can.addEventListener('mousemove', onMouseMove, false);
can.addEventListener('mousedown', onMouseDown, false);
can.addEventListener('mouseup', onMouseUp, false);

function onMouseMove(event) {
    if (mousePressed) {
        event.preventDefault();
        mouseX = event.clientX - can.offsetLeft;
        mouseY = event.clientY - can.offsetTop;
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();
    }
}

function onMouseDown(event) {
    mousePressed = true;
    mouseX = event.clientX - can.offsetLeft;
    mouseY = event.clientY - can.offsetTop;
    ctx.beginPath();
    ctx.moveTo(mouseX, mouseY);
}

$('#clearsig')[0].addEventListener('click', clearSignature, false);

function clearSignature() {
    ctx.clearRect(0, 0, can.width, can.height);
}

HTML：

<canvas id="signature" width="800" height="350" style="border:1px solid #000;"></canvas>

---

在桌面上，一切都用鼠标画得很好，我没有问题。然而，在我的galaxy标签3上，当我在画布上绘制时，线条会绘制一个之字形图案。不知道为什么会发生这种情况，也不知道如何解决。

不确定您是否找到了解决方法，但我遇到了一个类似的问题，并最终设法解决了它。在galaxy选项卡2和3的画布上绘制线条，以及galaxy note 10.1（2012版，2014版无问题）可以创建锯齿线。这同样适用于Izzey的JSFIDLE。如果您的问题与我的问题相同，则设备会同时拾取mousemove和touchmove。。它基本上用混乱的mousemove值画两次线。看看这个

---

这对我有用。我真的希望这有帮助：）

在平板电脑上进行测试，如果它工作正常，页面上的其他内容会干扰画布。fiddle在我的iOS设备上工作得非常好你是否对画布元素使用了CSS样式（除了内联）？在给出链接答案时，样式元素@Ken AbdiasSoftware中的边框-始终记住链接可能会在某个点停止工作。因此，请确保您的答案包含链接中的所有信息，即使是摘要。指导OP进行进一步阅读是可以的，但即使没有链接，答案也应该保持有效，而你的答案看起来不是这样。