Html 绘制的线与鼠标指针偏移

如果我向下滚动查看画布的底部，绘图功能仍然有效，但线条不是来自鼠标指针

---

问题是跨浏览器。

findxy函数使用画布的绝对位置，在调用时不会更改，但是clientX/clientY会相对于画布更改

您可以使用getBoundingClientRect（）中的信息将鼠标坐标移动到画布坐标空间中

试试这个：

function findxy(res, e) {
var rect = canvas.getBoundingClientRect();

if (res == 'down') {
    prevX = currX;
    prevY = currY;
    currX = e.clientX  - rect.left;
    currY = e.clientY - rect.top

    flag = true;
    dot_flag = true;
    if (dot_flag) {
        ctx.beginPath();
        ctx.fillStyle = x;
        ctx.fillRect(currX, currY, 2, 2);
        ctx.closePath();
        dot_flag = false;
    }
}
if (res == 'up' || res == "out") {
    flag = false;
}
if (res == 'move') {
    if (flag) {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - rect.left;
        currY = e.clientY - rect.top
        draw();
    }
}

}

---

getBoundingClientRect（）将获取画布相对于视图端口的坐标（与clientX/clientY相同），因此它不受滚动的影响。

我非常确定我知道这里的问题所在，但我快速查看了您的站点以确定。因此，您所需要做的就是添加窗口的滚动次数。据我所见，它应该插入findxy（）函数中，如下所示：

currX = window.pageXOffset + e.clientX - canvas.offsetLeft;
currY = window.pageYOffset + e.clientY - canvas.offsetTop;

---

因此，为了解释，事件对象中的clientX和clientY值计算鼠标相对于用户屏幕左上角的位置，而不是整个页面。这就是为什么我们还需要从窗口对象添加页面偏移值。

我认为您需要检查

findxy

函数。

currX = window.pageXOffset + e.clientX - canvas.offsetLeft;
currY = window.pageYOffset + e.clientY - canvas.offsetTop;