JavaScript中的stroke是一個非常重要的概念，它用于在HTML5中創建和繪制形狀，圖像或線條。使用stroke，你可以實現精細的線條和圖形設計，為你的頁面添加更多的美感。本篇文章將教你如何使用stroke，演示其用法和應用場景。

在JavaScript中，stroke的使用非常簡單。我們只需要在canvas上調用它，并傳入一些參數。例如，下面的代碼繪制了一個簡單的矩形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.rect(10, 10, 200, 200);
ctx.stroke();

上述代碼中，我們首先獲取了一個canvas元素，并獲取2D上下文對象。接著，我們開始一個新的路徑，設置線條的顏色為藍色，線條的寬度為5個像素，然后繪制一個具有左上角坐標(10, 10)，寬200像素，高200像素的矩形。最后，我們調用了stroke()方法，實現了線條的繪制。

除了繪制基本形狀外，我們還可以使用stroke在canvas中創建更復雜的圖形。例如，下面的代碼演示了如何繪制一個五角星：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;
var sides = 5;
var angle = 2 * Math.PI / sides;
ctx.beginPath();
ctx.moveTo(centerX + radius * Math.cos(0), centerY + radius * Math.sin(0));
for (var i = 1; i <= sides; i++) {
ctx.lineTo(centerX + radius * Math.cos(i * angle), centerY + radius * Math.sin(i * angle));
}
ctx.closePath();
ctx.strokeStyle = "red";
ctx.stroke();

上述代碼中，我們首先計算了五角星的中心坐標、半徑、幾何角和邊的數量。接著，我們使用moveTo()方法將路徑的起點移動到五角星的頂點，然后使用for循環計算出五角星的每個頂點坐標，使用lineTo()方法連接每個頂點。最后，我們使用closePath()方法將路徑封閉，設置畫筆顏色為紅色，并調用stroke()方法，繪制五角星的輪廓。

除此之外，stroke還有許多其他的用法。例如，我們可以在canvas中繪制漸變顏色線條，如下所示：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
ctx.beginPath();
ctx.moveTo(0, 75);
ctx.lineTo(400, 75);
ctx.strokeStyle = gradient;
ctx.lineWidth = 10;
ctx.stroke();

上述代碼中，我們使用createLinearGradient()方法創建一個水平方向的漸變顏色線性梯度，從紅色過渡到藍色。接著，我們使用moveTo()和lineTo()方法繪制一條水平正中間的線條。最后，我們設置畫筆的顏色為漸變對象，并調用stroke()方法，繪制漸變顏色線條。

總結來說，stroke是JavaScript中用于在canvas中繪制形狀、圖像或線條的重要屬性。無論是繪制簡單的線條還是繪制復雜的圖形，都需要用到stroke。使用stroke，你可以實現更豐富、更精細的繪制效果，讓你的頁面更加美觀。