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

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

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

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

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

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

这是线条被绘制但不合适的证明. (更换了固定尺寸的流体平台和帆布尺寸)

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

编辑
看起来我正在尝试做的不适合流畅的布局.经过很多麻烦我发现Canvas元素是它自己的平面,并没有安全的方法来匹配锚点坐标与画布坐标没有固定的大小

最佳答案 我发现了线路错位的原因.

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

这是固定的示例,所以你可以看看:

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

点赞