HTML5 画布绘图在平板电脑上变得锯齿状

html5 canvas drawing becomes jagged on tablet

本文关键字：平板电脑 锯齿状 布绘图 绘图 HTML5      更新时间：2023-09-26

这是我的代码：

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>

在桌面上，鼠标一切正常，我没有问题。然而，在我的银河选项卡 3 当我去画布上绘画时，这条线画了一个锯齿形图案。不知道为什么会发生这种情况或如何解决它。

不确定

您是否找到了答案，但我遇到了类似的问题，最终设法解决了它。在星系选项卡 2 和 3 的画布上绘制线条，以及银河笔记 10.1（2012 版，2014 版没有问题）可以创建锯齿状线条。这同样适用于Izzey的jsfiddle。如果您的问题与我的问题相同，则设备会同时选择鼠标移动和触摸移动。它基本上用混乱的鼠标移动值画了两次线。看看这个 http://jbkflex.wordpress.com/2012/07/12/javascript-touch-event-or-mouse-event-detect-and-handle-according-to-device/它对我有用。我真的希望这有帮助..:)

相关文章：