jquery - 如何通过在背景画布中绘制线条来连接两个 HTML 元素？

Question

可能更多的是一个数学问题，但在这里......

我想要做的是通过背景画布上的动画线连接两个 HTML 元素

这是我想做的简化版本的小提琴。

http://jsfiddle.net/loupax/zUqXn/

线条确实在那里，但它们在画布之外，如果您使用元素检查器，您可以看到画布中绘制的线条的坐标。有人可以帮我解决我做错了什么并且线条不合适吗？

这证明了线条是画出来的，但不合适。（用固定尺寸替换流体阶段和画布尺寸）

http://jsfiddle.net/loupax/zUqXn/8/

编辑看起来我正在尝试做的事情对于流畅的布局是不可能的。经过很多麻烦后，我发现 Canvas 元素是它自己的平面，并且没有安全的方法可以将锚坐标与没有固定大小的画布坐标匹配

Answer 1

我已经找到了线路错位的原因。

似乎画布的CSS宽度和高度与画布元素的实际宽度和高度完全不同。因此，如果您希望 HTML 元素的坐标与 Canvas 元素上的线条坐标相匹配，则需要在包含它的 div 上设置固定宽度，并且直接在元素上设置相同且固定的宽度和高度

这是固定示例，因此您可以查看：

http://jsfiddle.net/loupax/zUqXn/29/