Canvas是HTML5中的一個重要特性，它允許我們通過JavaScript在網頁上繪制圖形和實現動畫效果。在使用Canvas時，我們可以輕松地實現各種交互效果，其中之一就是拖動元素并連線。通過在Canvas中繪制線條，我們可以創建出各種有趣的效果，實現拖動不同的div元素，并用線條將它們連接起來。

，我們需要在HTML中創建一個Canvas元素和一些待拖動的div元素。然后，在JavaScript中，我們可以使用事件監聽器來實現拖動功能。我們需要追蹤鼠標在Canvas上的點擊、移動和釋放動作，并將div元素的位置更新為鼠標移動的位置。

<code>
// HTML
<canvas id="myCanvas" width="500" height="500"></canvas>
<div id="div1" class="draggable">Div 1</div>
<div id="div2" class="draggable">Div 2</div>
<br>
<style>
.draggable {
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
color: white;
text-align: center;
line-height: 50px;
cursor: move;
}
</style>
<br>
// JavaScript
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
<br>
    var isDragging = false;
var dragTarget = null;
<br>
    canvas.addEventListener("mousedown", function(e) {
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
<br>
        if (x >= div1.offsetLeft && x <= (div1.offsetLeft + div1.offsetWidth) &&
y >= div1.offsetTop && y <= (div1.offsetTop + div1.offsetHeight)) {
isDragging = true;
dragTarget = div1;
} else if (x >= div2.offsetLeft && x <= (div2.offsetLeft + div2.offsetWidth) &&
y >= div2.offsetTop && y <= (div2.offsetTop + div2.offsetHeight)) {
isDragging = true;
dragTarget = div2;
}
});
<br>
    canvas.addEventListener("mousemove", function(e) {
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
<br>
        if (isDragging && dragTarget) {
dragTarget.style.left = x + "px";
dragTarget.style.top = y + "px";
}
});
<br>
    canvas.addEventListener("mouseup", function(e) {
isDragging = false;
dragTarget = null;
});
}
</code>

在這個案例中，我們創建了一個拖動區域，其中包含了兩個可拖動的div元素。

在案例一的基礎上，我們可以通過在Canvas中繪制線條來實現連線效果。我們需要在移動div元素時，記錄它們的位置，然后在Canvas中繪制相應的線條連接它們。

<code>
// JavaScript
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
<br>
    var isDragging = false;
var dragTarget = null;
var startX = 0;
var startY = 0;
<br>
    canvas.addEventListener("mousedown", function(e) {
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
<br>
        if (x >= div1.offsetLeft && x <= (div1.offsetLeft + div1.offsetWidth) &&
y >= div1.offsetTop && y <= (div1.offsetTop + div1.offsetHeight)) {
isDragging = true;
dragTarget = div1;
startX = x;
startY = y;
} else if (x >= div2.offsetLeft && x <= (div2.offsetLeft + div2.offsetWidth) &&
y >= div2.offsetTop && y <= (div2.offsetTop + div2.offsetHeight)) {
isDragging = true;
dragTarget = div2;
startX = x;
startY = y;
}
});
<br>
    canvas.addEventListener("mousemove", function(e) {
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
<br>
        if (isDragging && dragTarget) {
dragTarget.style.left = x + "px";
dragTarget.style.top = y + "px";
<br>
            ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(x, y);
ctx.stroke();
}
});
<br>
    canvas.addEventListener("mouseup", function(e) {
isDragging = false;
dragTarget = null;
});
}
</code>

在這個案例中，我們繪制了一個簡單的線條來連接兩個移動的div元素。我們通過ctx.clearRect()方法清除Canvas中的內容，然后使用ctx.beginPath()、ctx.moveTo()和ctx.lineTo()方法繪制線條，并使用ctx.stroke()方法將線條渲染到Canvas上。

通過這種方式，我們可以在Canvas中實現拖動不同的div元素并用線條將它們連接起來的效果。

參考文章： - <a target="_blank">HTML5 | Canvas | Drag and Drop Div </a>