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

可能更多的是数学问题，但在这里……

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

这是一个小提琴，简化了我想做的事情。

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

这些线实际上在那里，但它们在canvas之外，如果使用元素检查器，则可以在canvas中看到绘制线的坐标。有人可以帮我解决我做错了什么，线条被拉出来了吗？

这是线条被绘制但不合适的certificate。（用固定尺寸替换流体平台和帆布尺寸）

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

编辑看起来我正在尝试做的是流体布局不可能。经过很多麻烦后我发现Canvas元素是它自己的平面，没有安全的方法来匹配锚点坐标和canvas坐标，没有固定的大小

我发现了线路错位的原因。

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

这是固定的示例，所以你可以看看：