Question

这是我的代码：

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当我在画布上绘制时，该线条绘制了锯齿形图案。不知道为什么会发生这种情况或如何解决它。

Answer 1

不确定你是否找到了答案，但我有一个类似的问题，并最终设法解决它。在galaxy tab 2和3上的画布上绘制线条，同样是galaxy note 10.1（2012版，2014版没有问题）可以创建锯齿状线条。同样适用于Izzey的jsfiddle。如果你的问题与我的问题相同，那么设备正在选择mousemove和touchmove ..它基本上用乱搞的鼠标移动两次绘制线条。看看这个http://jbkflex.wordpress.com/2012/07/12/javascript-touch-event-or-mouse-event-detect-and-handle-according-to-device/ 它对我有用。我真的希望这会有所帮助.. :)

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

1 个答案: