JavaScript Canvas绘图：页面滚动导致坐标偏移的解决方法
在页面滚动时，使用JavaScript获取元素坐标用于Canvas绘图容易出现偏差。本文分析此问题，并提供解决方案。
问题： 当页面发生滚动，特别是目标元素滚动出浏览器窗口可见区域后，在Canvas上绘制的箭头位置会发生偏移。即使不刷新页面，再次点击目标元素，偏移依然存在，后续绘制的箭头位置也随之错误。
问题根源： offsetTop 和 offsetLeft 获取的是元素相对于其父元素的坐标，页面滚动后，元素相对于页面的坐标不变，但相对于浏览器窗口的坐标却改变了。
解决方案： 关键在于获取页面滚动距离，并将其纳入坐标计算。通过 window.pageYOffset (或 document.documentElement.scrollTop 或 document.body.scrollTop) 获取页面垂直滚动距离，然后将此距离添加到目标元素的坐标中，即可得到元素在浏览器窗口中的准确坐标。
通过修正后的坐标进行Canvas绘图，即使页面滚动，也能保证箭头位置的准确性。 这确保了在任何滚动状态下，Canvas绘图都能准确反映元素在浏览器窗口中的位置。
