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

Question

也许更多是数学问题，但是我来试一下......

我的想法是将两个HTML元素通过背景画布上的动画线连接起来。

这里有一个fiddle，其中包含我想要实现的简化版本。

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

实际上，这些线条是存在的，但它们在画布之外。如果您使用元素检查器，可以看到在画布中绘制的线条的坐标。请问有人能帮我解决问题吗？为什么这些线条会画错位置呢？

这证明了这些线条确实被绘制出来了，只是位置不对。（已将流体舞台和画布尺寸替换为固定尺寸）

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

编辑 看起来我想做的事情对于流式布局来说是不可能的。经过一番努力，我发现画布元素是独立的平面，没有安全的方法将锚点坐标与画布坐标匹配，而且没有固定的尺寸。

- Loupax

---

使用Safari（附带于OS X 10.4的旧版本），我看不到任何线条。是浏览器特定的问题吗？ - 11684

这些线条不可见，因为它们被绘制在画布外面。如果我调整每条线的坐标值，我可以看到它们，但位置不正确 :/ - Loupax

你忘记定义 .clear 类，所以出现了 clearfix 问题。在你的 CSS 中添加 .clear { clear: both; }，这样线条就会正常显示（尽管可能存在一些定位问题）。 - Pevara

那个定位问题是我遇到的问题... 我会更新代码。 - Loupax

你可能会对这个网站感兴趣：http://jsplumb.org/，虽然我不确定它是否支持自定义动画连接。 - goat

Answer 1

我找到了线条放置位置不正确的原因。

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

这是已修复的示例，供您查看: http://jsfiddle.net/loupax/zUqXn/29/

- Loupax