HTML Canvas 直線

實例

// 創建畫布：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 定義一個新路徑：
ctx.beginPath();
// 定義起點：
ctx.moveTo(0, 0);
// 定義終點：
ctx.lineTo(200, 100);
// 繪制：
ctx.stroke();

親自試一試

Canvas 線條繪制

線條繪制使用畫布中的路徑：

方法

beginPath() 方法開始一條新路徑。它不繪制任何東西，它只是定義一條新路徑。

moveTo() 定義線的起點。它不繪制任何東西，只是設置一個起點。

lineTo() 方法定義線的終點。它不繪制任何東西，只是設置一個終點。

stroke() 方法實際地繪制線條。默認筆觸顏色為黑色。

lineWidth 屬性

lineWidth 屬性定義在畫布中繪制時要使用的線條寬度。

必須在調用 stroke() 方法之前設置它。

實例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

親自試一試

strokeStyle 屬性

strokeStyle 屬性定義在畫布中繪制時要使用的樣式。

必須在調用 stroke() 方法之前設置它。

實例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

親自試一試

lineCap 屬性

lineCap 屬性定義線的端部樣式（butt、round 或 square）。

默認為 square（方形）。

必須在調用 stroke() 方法之前設置它。

實例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

親自試一試

另請參閱：

CodeW3C.com 的完整 Canvas 參考手冊