Javascript 使用canvas、SVG和js在两个div之间绘制箭头或线

我想映射两个字段，并在两个对象之间画一条线，如果我发现它们匹配的话。下面是代码

.集装箱{
宽度：600px；
保证金：100像素自动；
}
.街区{
填充：20px；
宽度：100px；
颜色：#FFFFFF；
字体大小：粗体；
字号：18px；
文本对齐：居中；
边缘底部：20px；
}
.左侧{
浮动：左；
}
.右侧{
浮动：对；
}
.粉红{
背景：粉红色；
}
瑞德先生{
背景：红色；
}
格林先生{
背景：绿色；
}
A.
B
C
C
A.
B

创建一条线和一个箭头（使用边框可以创建它）

---

代码如下所示。

可以使用画布或svg。将现有DIV与svg和canvas混合使用是可能的，但如果您也在svg/canvas中绘制A、B、C矩形，则会更容易。您可以分享一些示例以供参考吗？中提到的jsPlumb的可能副本可以帮助您使用动态线。可能的

var disX = leftA.right - rightA.left;
var disY = leftA.top - rightA.top;
var dis = Math.sqrt( disX * disX + disY * disY );
line.style.width = dis;
line.style.transform = `rotate(${Math.atan(disY/disX)}deg)`;