Question

我有一个绘制CANVAS线的函数，并通过使用offsetLeft使其获得<div>的相同坐标。该行搜索<div>的相同位置，使其粘贴在<div>它正常工作但仅当页面加载并且浏览器刷新时。

drawCanvas() {
  const c = document.getElementById("canvas");
  const lineH = c.getContext("2d");      
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  const lineV = c.getContext("2d");   

 const positionCanvas = () => {
   lineV.clearRect(0, 0, c.width, c.height);    
   const divPosition = document.querySelector('.myDiv').offsetLeft  
   lineV.fillStyle = "grey";
   lineV.fillRect(divPosition , 0, 2, window.innerHeight);
   lineV.fill();
}

  positionCanvas() 

  window.onresize = () => {    
  lineV.height = window.innerHeight; 
  positionCanvas()     
}

我希望每次都能使它工作得很好，特别是当我处理窗口的大小调整时。我该如何解决？

示例：

页面已加载：好！！！画布线粘贴在<div>
当用户手动调整窗口浏览器的大小时：不工作!!!画布搜索<div>但没有粘在它上面，两者之间有距离。
停止浏览器调整大小后：不工作!!! lline仍然与<div>
在新位置刷新浏览器：好！！！画布线贴在<div>

Answer 1

我找到了解决方案。只需将函数drawCanvas()放入window.onresize而不是positionCanvas()。

就像那样：

 window.onresize = () => {  
  drawCanvas()    
}

在调整浏览器窗口大小时，如何获取HTML元素的位置？

1 个答案: