如何通過在背景畫布中繪製線條來連接兩個HTML元素？

我想要做的是通過在背景畫布

這裏動畫線連接的兩個HTML元素是有一個小提琴我想要做的簡化版本。

該行實際上是有的，但他們是在畫布之外，如果你使用你的元素檢查，你可以看到在畫布上畫線的座標。有人可以幫我解決我做錯了什麼，並且這些線條被抽出來嗎？

這是線條被繪製但不合適的證據。（有固定尺寸更換流體階段和畫布大小）

編輯看起來像什麼，我試圖做一個流動佈局是不可能的。經過很多麻煩，我發現Canvas元素是它自己的平面，沒有安全的方法來匹配錨點座標和沒有固定尺寸的畫布座標。

2012-08-04 Loupax

使用Safari（舊的，帶有OS X 10.4），我沒有看到任何線路。瀏覽器的具體情況？ – 11684 2012-08-04 20:28:20

這些線條不可見，因爲它們在畫布外繪製。如果我調整每行的座標值，我可以看到它們，但不在正確的位置：/ – Loupax 2012-08-04 20:31:26

您忘記了頂部定義了.clear類，因此您遇到了clearfix問題。添加.clear {clear：both;}到你的CSS並且線條顯示正常（雖然有一些定位問題） – Pevara 2012-08-04 20:43:16

我發現了錯位的原因。

看起來，畫布的CSS寬度和高度與畫布元素的實際寬度和高度完全不同。因此，如果您希望使HTML元素的座標與Canvas元素上的線的座標相匹配，則需要在包含該元素的div上設置固定寬度，並且直接在元素上設置相同的固定寬度和高度，例如

這裏是固定的例子，所以你可以看看：

2012-08-05 12:21:37 Loupax

回答