可能更多的是一个数学问题,但在这里…
我想做的是两个HTML元素通过背景画布上的动画线连接起来
这是我想做的事情的简化版本。
http://jsfiddle.net/loupax/zUqXn/
这些线实际上在那里,但它们在画布之外,如果使用元素检查器,可以看到画布中绘制的线的坐标。
有人能帮我弄清楚我做错了什么,而且这些线被画错了地方吗?
这就证明了这些线是画出来的,但位置不对。(用固定尺寸替换了流动舞台和画布尺寸)
http://jsfiddle.net/loupax/zUqXn/8/
编辑
看来我要做的是不可能有流畅的布局。在经历了很多麻烦之后,我发现canvas元素是它自己的平面,没有安全的方法来匹配锚定坐标和没有固定大小的canvas坐标。
最佳答案
我已经找到了这些线错误放置的原因。
似乎画布的css宽度和高度与画布元素的实际宽度和高度完全不同。因此,如果希望使html元素的坐标与canvas元素上的行的坐标匹配,则需要在包含它的div上设置固定宽度,并直接在元素上设置相同的固定宽度和高度。
下面是固定示例,您可以查看:
http://jsfiddle.net/loupax/zUqXn/29/