js 实现html两个div之间直线相连，给出具体的实现代码

可以通过创建一个 `canvas` 元素，并在其中用 `JavaScript` 绘制直线来实现两个 `div` 之间的直线连接。具体实现代码如下：

HTML 代码：

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<canvas id="lineCanvas"></canvas>

CSS 代码：

#div1, #div2 {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  position: absolute;
  top: 50px;
  left: 50px;
}

#div2 {
  left: 200px;
}

#lineCanvas {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript 代码：

const canvas = document.getElementById('lineCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#333';

const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');

const div1Rect = div1.getBoundingClientRect();
const div2Rect = div2.getBoundingClientRect();

const x1 = div1Rect.left + div1Rect.width / 2;
const y1 = div1Rect.top + div1Rect.height / 2;
const x2 = div2Rect.left + div2Rect.width / 2;
const y2 = div2Rect.top + div2Rect.height / 2;

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

上述代码中，我们首先获取了两个 `div` 元素的中心坐标，然后在 `canvas` 上使用这些坐标绘制了一条直线。最后，我们将 `canvas` 元素的 `position` 属性设置为 `absolute`，并将其 `top` 和 `left` 属性设置为 `0`，以使其覆盖在 `div` 元素上方。