，我們需要創建一個 HTML 頁面，并進行一些基本的設置。在 <body> 標簽內添加一個 <canvas> 元素和一個 <div> 元素，用于繪制圖形和顯示連線效果。為了更好地控制樣式，我們給 <div> 添加一個 id 屬性，如下所示：
<code> <body> <canvas id="myCanvas"></canvas> <div id="lineWrapper"></div> </body> </code>
接下來，我們需要借助 JavaScript 來編寫繪制連線的代碼。，我們獲取 <canvas> 的上下文，使用 getContext() 方法來指定我們要使用的上下文類型（2d 或 3d），這里我們選擇 2d 上下文：
<code>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
</code>現在，我們可以開始繪制圖形了。為了方便起見，我們先創建一個名為 drawCircle() 的函數，并在該函數內使用上下文對象的 arc() 方法來繪制圓形。為了調用方便起見，我們還可以將該函數封裝在一個自定義的對象中，如下所示：
<code>
const drawer = {
drawCircle: function(x, y, radius, color) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
};
</code>現在，我們可以在頁面中添加一些圓形，并給每個圓形綁定事件，以在點擊時進行連線。我們可以通過遍歷給定的坐標數組，調用 drawCircle() 方法繪制圓形。為了更好地展示效果，我們可以為每個圓形選擇不同的顏色，并為其添加點擊事件，如下所示：
<code>
const coordinates = [
{x: 50, y: 50},
{x: 150, y: 50},
{x: 150, y: 150},
{x: 50, y: 150}
];
<br>
for (let i = 0; i < coordinates.length; i++) {
const {x, y} = coordinates[i];
const color = <code>hsl(${i * (360 / coordinates.length)}, 100%, 50%)</code>; // 通過動態計算顏色
drawer.drawCircle(x, y, 20, color);
<br>
const circle = document.createElement('div');
circle.style.backgroundColor = color;
circle.addEventListener('click', function() {
drawLine(x, y, color);
});
document.getElementById('lineWrapper').appendChild(circle);
}
</code>上述代碼中，我們使用一個數組來存儲每個圓形的坐標值。通過循環遍歷數組，為每個坐標值調用 drawCircle() 方法繪制圓形，并動態計算顏色值。同時，我們使用 document.createElement() 方法創建一個 <div> 元素作為圓形，為其設置背景色，并為點擊事件綁定 drawLine() 方法。最后，我們將該元素添加到 id 為 "lineWrapper" 的 <div> 中。
最后，我們需要實現連線的效果。為此，我們需要編寫 drawLine() 方法，該方法用于在兩個圓形之間繪制直線。使用上下文對象的 moveTo() 方法將繪圖游標移動到起始坐標，再使用 lineTo() 方法連接直線的終點坐標，最后使用 stroke() 方法繪制連線。我們同樣將這個方法封裝在自定義的對象中，如下所示：
<code>
const connector = {
drawLine: function(startX, startY, endX, endY, color) {
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
}
};
</code>這樣，當用戶點擊圓形時，我們就可以調用 drawLine() 方法進行連線。將連接線的起始坐標設為圓形的中心坐標，連接線的終點坐標設為正在點擊的圓形的中心坐標，同時，也傳入圓形的顏色值，以保持連線和圓形顏色一致。調用 drawLine() 方法后，我們就能在 <canvas> 上創建連線效果了。
綜上所述，我們通過使用 canvas 元素和 div 元素，并結合 JavaScript 的繪圖功能以及事件綁定機制，可以實現一個連線效果。這為我們的網頁設計和交互帶來了更多的可能性，使我們能夠創建出更加豐富和動態的頁面。