如何在浏览器窗口resize时获取HTML元素位置？Canvas线条贴合div失效求解

这问题我之前也碰到过！核心原因是窗口 resize 时，你没有重新获取元素的最新位置，也没有触发重绘逻辑。咱们一步步解决：

问题根源 #

页面加载/刷新时，你只执行了一次drawCanvas()，此时元素的offsetLeft等位置属性是准确的。但窗口调整大小后：

1. Canvas的宽高虽然更新了，但元素的位置可能因为响应式布局变化发生了改变
2. 没有重新触发绘制逻辑，导致线条还是用旧的位置数据绘制

解决方案 #

1. 重构绘制函数，确保每次调用都能获取最新元素位置 #

首先把获取元素位置和绘制的逻辑整合，保证每次调用都能拿到最新的布局数据，同时复用同一个Canvas上下文（不需要创建两个getContext实例）：

function drawCanvas() {
  const c = document.getElementById("canvas");
  const ctx = c.getContext("2d"); // 单个上下文足够用
  
  // 更新Canvas尺寸匹配当前窗口
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  
  // 清空画布，避免重绘时残留旧线条
  ctx.clearRect(0, 0, c.width, c.height);
  
  // 替换成你的目标div ID
  const targetDiv = document.getElementById("your-target-div");
  if (!targetDiv) return; // 元素不存在时直接返回
  
  // 方式1：用offsetLeft/offsetTop（相对于父定位元素）
  // const divLeft = targetDiv.offsetLeft;
  // const divTop = targetDiv.offsetTop;
  
  // 方式2：更推荐用getBoundingClientRect()（相对于视口，适配滚动和复杂布局）
  const rect = targetDiv.getBoundingClientRect();
  const divLeft = rect.left;
  const divTop = rect.top;
  const divWidth = rect.width;
  const divHeight = rect.height;
  
  // 绘制贴合div的线条（示例：绘制div的边框）
  ctx.strokeStyle = "#2196F3";
  ctx.lineWidth = 2;
  ctx.strokeRect(divLeft, divTop, divWidth, divHeight);
}

2. 监听窗口resize事件，触发重绘（加防抖优化性能） #

窗口调整时会频繁触发resize事件，直接调用drawCanvas()会导致性能问题，所以加个防抖函数，避免短时间内多次重绘：

// 页面加载时初始化绘制
window.addEventListener("load", drawCanvas);

// 监听resize事件，加防抖
let resizeDebounceTimer;
window.addEventListener("resize", () => {
  clearTimeout(resizeDebounceTimer);
  // 100ms延迟，可根据需求调整
  resizeDebounceTimer = setTimeout(drawCanvas, 100);
});

关键细节说明 #

• 清空画布：每次重绘前用clearRect清空，不然旧的线条会留在Canvas上，导致重叠混乱
• getBoundingClientRect()的优势：相比offsetLeft，它返回的是元素相对于浏览器视口的位置，能自动适配页面滚动、父元素定位变化等场景，准确性更高
• 防抖处理：避免窗口拖动过程中频繁触发重绘，减少性能消耗

内容的提问来源于stack exchange，提问作者claudiopb