javascript - 滚动上的 Canvas 签名更改鼠标绘制位置

Question

我正在尝试使用 Canvas ，以便人们可以用鼠标写下他们的签名。一切正常，直到我拉伸(stretch)或滚动屏幕然后它在远离鼠标的不同位置绘制线。

代码:

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 相对于视口(viewport)的左上角。因此不考虑滚动。 event.pageX/Y 是相对于文档的。因此，事件发生在屏幕上的位置，包括滚动。您可以将对 clientX 的所有引用更改为 pageX 并将对 clientY 的所有引用更改为 pageY，它应该可以工作。

Explanation of each screen/page/client XY.