我尝试在使用CSS选择器在DOM上找到的元素之间绘制一些线时有一些不一致，并且相信它可能与我调用getBoundingClientRect（）的方法有关。
如果有人可以提供有关如何计算boundingClientRect的顶部，左侧，底部，右侧的任何信息，特别是关于HTML画布，我将非常感激。
我得到的一个不一致的例子是当我做canvas.getBoundingClientRect（）。顶部我得到70.然后我在DOM中找到一个元素并计算它的顶部，即334。当我减去两者找到偏移量（334 - 70 = 264），但是当我在画布上画一个网格时，我可以清楚地看到该元素大于275，差不多是280。
我认为真正的问题是，这种方法是否总是给出相同的矩形的顶部和底部，因为这是我可以针对不一致的唯一解释。
由于
答案 0 :(得分：0)
getBoundingClientRect返回相对于视口的坐标。这意味着它不会考虑窗口（正文）滚动位置。
宽度和高度以外的属性相对于视口的左上角。
例如，如果窗口向下滚动10px，则必须在返回的top值中添加10，以获取相对于文档左上角的元素左上角坐标。
也许你的窗口滚动了，这搞砸了你的计算。
如果您使用jQuery，则可以使用其offset方法，该方法返回相对于文档左上角的坐标，顺便说一句，在内部使用getBoundingClientRect（至少较新的版本）。