jQuery DOM 連線是一種前端技術，可以通過 JavaScript 代碼在網頁上進行元素之間的連線和繪畫，非常適合實現交互式的圖示或流程圖。

$(() => {
const canvas = $('#canvas');
const context = canvas[0].getContext('2d');
const boxes = $('.box');
// 繪制連線
function drawLine() {
context.clearRect(0, 0, canvas.width(), canvas.height());
boxes.each((i, box) => {
const x1 = $(box).offset().left + $(box).outerWidth() / 2;
const y1 = $(box).offset().top + $(box).outerHeight() / 2;
$(box).find('.connect-to').each((j, target) => {
const x2 = $(target).offset().left + $(target).outerWidth() / 2;
const y2 = $(target).offset().top + $(target).outerHeight() / 2;
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
});
});
}
// 初始化連線
function init() {
drawLine();
// 監聽窗口大小變化，重新繪制連線
$(window).on('resize', drawLine);
// 監聽綁定事件，重新繪制連線
$('.box .connect-to').on('click', drawLine);
}
init();
});

在這段代碼中，我們首先獲取了畫布元素和所有需要連線的盒子元素，然后編寫了連線繪制函數 drawLine。在 drawLine 函數中，我們遍歷每個盒子元素，并找到所有需要連線的目標元素。對于每一對盒子和目標元素，我們計算它們中心點的坐標，并使用 canvas 的 beginPath、moveTo 和 lineTo 方法來連接起來。最后，我們監聽了窗口大小變化和綁定事件，并在這些情況下重新繪制連線。