可能更多的是数学问题,但在这里……
我想要做的是两个HTML元素通过背景画布上的动画线连接
这是一个小提琴,简化了我想做的事情.
http://jsfiddle.net/loupax/zUqXn/
这些线实际上在那里,但它们在画布之外,如果使用元素检查器,则可以在画布中看到绘制线的坐标.
有人可以帮我解决我做错了什么,线条被拉出来了吗?
这是线条被绘制但不合适的证明. (更换了固定尺寸的流体平台和帆布尺寸)
http://jsfiddle.net/loupax/zUqXn/8/
编辑
看起来我正在尝试做的不适合流畅的布局.经过很多麻烦我发现Canvas元素是它自己的平面,并没有安全的方法来匹配锚点坐标与画布坐标没有固定的大小
最佳答案 我发现了线路错位的原因.
看起来画布的CSS宽度和高度与canvas元素的实际宽度和高度完全不同.因此,如果您希望使HTML元素的坐标与Canvas元素上的线条的坐标相匹配,则需要在包含它的div上设置固定宽度,并在元素上直接设置相同且固定的宽度和高度
这是固定的示例,所以你可以看看: