【发布时间】：2012-08-05 20:21:37
【问题描述】：
可能更多的是一道数学题，但这里是……
我想要做的是通过背景画布上的动画线连接两个 HTML 元素
这是我想做的简化版本的小提琴。
http://jsfiddle.net/loupax/zUqXn/
线条确实存在，但它们在画布之外，如果您使用元素检查器，您可以看到画布中绘制的线条的坐标。 有人可以帮我解决我做错了什么并且线条不合适吗？
这证明了线条是画出来的，但不合适。 （用固定尺寸替换流体舞台和画布尺寸）
http://jsfiddle.net/loupax/zUqXn/8/
编辑 看起来我正在尝试做的事情对于流畅的布局是不可能的。经过很多麻烦后，我发现 Canvas 元素是它自己的平面，并且没有安全的方法可以将锚坐标与没有固定大小的画布坐标匹配
【问题讨论】：
-
使用 Safari（旧版本，OS X 10.4 自带），我看不到任何线条。特定于浏览器？
-
线条不可见，因为它们是在画布之外绘制的。如果我调整每条线的坐标值，我可以看到它们，但不是在正确的位置：/
-
您忘记在顶部定义 .clear 类，因此您遇到了 clearfix 问题。将 .clear { clear: both;} 添加到您的 css 中，并且线条显示正常（尽管存在一些定位问题）
-
定位问题是我遇到的问题...我会更新代码
-
您可能对此jsplumb.org 感兴趣，尽管我不确定它是否支持自定义动画连接。
标签： jquery html html5-canvas