JavaScript 動態線是一種非常有用的功能，它允許網頁中出現動態的線條或曲線，增添網頁的視覺吸引力。動態線可以被用在許多場合，例如用來展示進度條或者實現很炫酷的網頁交互效果。

我們可以用HTML canvas標簽實現一條簡單的動態線條。首先需要在html中創建一個canvas元素:

<canvas id="canvas" width="500" height="500"> </canvas>

接下來，在JavaScript中添加以下代碼，創建一個畫布上滑動的線條：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var position = 0;
var increment = 5;
function drawLine() {
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 2;
context.moveTo(position, 200);
context.lineTo(position + 50, 200);
context.stroke();
position += increment;
if (position >canvas.width) {
position = 0;
}
}
setInterval(drawLine, 20);

這個代碼塊中，我們首先通過`document.getElementById`方法獲取到canvas元素，并通過`canvas.getContext`方法獲取到canvas畫布上繪制圖形的上下文。在`drawLine`函數中，我們使用`beginPath`開啟一條新的路徑，并通過`moveTo`和`lineTo`方法來畫線。我們使用`stroke`方法來繪制線條，最后根據增量`increment`來更新線條的位置。

為了使線條動起來，我們使用了`setInterval`方法，每20毫秒通過調用`drawLine`函數來不停地繪制線條。這就是動態線條的基礎實現。

我們還可以通過JavaScript添加事件來實現交互式動態線條，例如當鼠標在canvas上面移動時，線條跟隨著鼠標移動。下面是代碼示例：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var position = 0;
var increment = 5;
canvas.addEventListener("mousemove", function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
position = event.clientX;
}, false);
function drawLine() {
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 2;
context.moveTo(position, 200);
context.lineTo(position + 50, 200);
context.stroke();
}
setInterval(drawLine, 20);

在這個版本的代碼中，我們添加了一個鼠標移動事件監聽器，在鼠標移動時清除畫布并重新繪制線條的起始位置。這使得線條會隨著鼠標位置的變化而變化，實現了交互式的動態線條效果。

總之，JavaScript動態線條是一個非常有趣和有用的功能，它可以為網頁增添視覺吸引力和用戶交互性。通過使用canvas元素和JavaScript編寫相應代碼，我們可以輕松實現各種各樣的動態線條效果。