Javascript 多画布绘图问题

我正在构建一个绘画工具应用程序。我正在使用两个画布。一个用于加载背景图像，另一个用于绘制。绘画画布放置在另一块画布上。我用了两张画布，因为我不想让橡皮擦工具对图像产生影响。在我的代码上，应用程序绘制的y位置并不总是准确的。在大多数情况下，绘制的直线高于实际绘制的路径

---

如果滚动浏览器窗口，则需要调整该滚动

以下是方法：

var scrollAdjustment=$("html,body").scrollTop();

mouseY+=scrollAdjustment;

如果你水平滚动，你也需要调整水平滚动

顺便说一句，由于画布偏移量没有改变，您可以预先计算画布偏移量一次，而不是每次在事件处理程序中计算

在顶部的设置中：

    var canvasOffset=$("#drawingCanvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

在事件处理程序中：

    var scrollAdjustment=$("html,body").scrollTop();
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY+scrollAdjustment);

---

如果您正在使用鼠标事件的clientX、clientY属性，并且将事件挂接在窗口上，那么您应该在画布上获取BoundingClientRect以了解其顶部和左侧位置，然后减去它们

---

Rq：您可能还考虑将事件挂接到画布上。

问题发生在滚动页面之后。

    var scrollAdjustment=$("html,body").scrollTop();
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY+scrollAdjustment);