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

我试图使用画布，这样一个人就可以用鼠标写下他们的签名。一切正常，直到我拉伸或滚动屏幕，然后它在远离鼠标的另一个地方画线

守则：

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看起来像：

---

将屏幕的滚动偏移量添加到mouseX和mouseY中。使用jQuery时，它看起来是这样的

mouseX = event.clientX - can.offsetLeft - mleft + $(window).scrollLeft;
mouseY = event.clientY - can.offsetTop - mtop + $(window).scrollTop;

---

event.clientX/Y

相对于视口的左上角。所以不考虑滚动<代码>事件。pageX/Y与文档相关。所以事件发生在屏幕上的位置，包括滚动。您可以将对

clientX

的所有引用更改为

pageX

并将

clientY

更改为

pageY

，这样应该可以工作

---

似乎您只需要一种更可靠的方法来获取页面回流时的相对坐标

@RyanArtecona编写了以下函数以响应：

这很方便，因为它添加了一个函数，可以将相对坐标直接获取到

htmlcanvaseElement

函数的原型上，这意味着您可以传入一个对要使用的画布的引用，并获取相对于画布的坐标

使用此选项，您可以重写mousedown函数（您还需要执行其他函数，但仅作为示例），如下所示：

function onMouseDown(event) {
    'use strict';
    mousePressed = true;
    // get a reference to the 'signature' canvas
    var canvas = document.getElementById('signature');
    // this returns an object with 'x' and 'y' properties
    var mouse = canvas.relMouseCoords(event)
    ctx.beginPath();
    // use the coordinates you got
    ctx.moveTo(mouse.x, mouse.y);
}

改变这两行

mouseX = event.clientX - can.offsetLeft - mleft;
mouseY = event.clientY - can.offsetTop - mtop;

到

在你的两个处理器中。浏览器可以为您处理相对坐标，而无需进行任何特殊计算

offsetX/Y

似乎是Chrome/IE特有的，并且

layerX/Y

为您提供Firefox支持

---

这是一本书。我对声明做了一些细微的更改，以使您的

使用严格的
来工作，因为我们似乎缺少一点代码。
这不是一个简单的答案。解决这个问题的最好方法是从一个好的基础开始，然后对你的情况做一些渐进的改变。我在这个主题上看到的最好的文章来自Internet Explorer团队：


这篇文章将为正确捕获鼠标输入提供一个很好的基础。
mouseX = event.clientX - can.offsetLeft - mleft;
mouseY = event.clientY - can.offsetTop - mtop;

mouseX = event.offsetX || event.layerX;
mouseY = event.offsetY || event.layerY;