滚动上的画布签名会更改鼠标绘制位置

Question

我正在尝试使用画布,以便用鼠标可以写出他们的签名.一切正常,直到我拉伸或滚动屏幕然后它在远离鼠标的不同位置绘制线条.

代码:

function onMouseUp(event) {
    'use strict';
    mousePressed = false;
}
function onMouseMove(event) {
    'use strict';
    if (mousePressed) {
        event.preventDefault();
        mouseX = event.clientX - can.offsetLeft - mleft;
        mouseY = event.clientY - can.offsetTop - mtop;
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();
    }
}
function onMouseDown(event) {
    'use strict';
    mousePressed = true;
    mouseX = event.clientX - can.offsetLeft - mleft;
    mouseY = event.clientY - can.offsetTop - mtop;
    ctx.beginPath();
    ctx.moveTo(mouseX, mouseY);
}
can.addEventListener('mousemove', onMouseMove, false);
can.addEventListener('mousedown', onMouseDown, false);
can.addEventListener('mouseup', onMouseUp, false);

HTML看起来像: <canvas id="signature" width="567" height="150"></canvas>

Answer 1

event.clientX/Y相对于视口的左上角。所以不考虑滚动。event.pageX/Y是相对于文档而言的。所以它是事件发生在屏幕上的位置，包括滚动。您可以更改所有对clientXtopageX和clientYto 的引用pageY，它应该可以工作。

每个屏幕/页面/客户端 XY 的说明。