HTML Canvas 線條
Canvas 線條繪製
要繪製一條線，我們使用以下方法
| 方法 | 描述 | 繪製 |
|---|---|---|
beginPath() |
宣告我們準備繪製一條新路徑（不進行繪製） | 否 |
moveTo(x,y) |
設定 Canvas 中線條的起始點（不進行繪製） | 否 |
lineTo(x,y) |
設定 Canvas 中線條的終點（不進行繪製） | 否 |
stroke() |
繪製線條。預設描邊顏色為黑色 | 是 |
示例
定義一個起始點在位置 (0,0)，終點在位置 (200,100)。然後使用 stroke() 來實際繪製線條
<script>
// 建立一個 Canvas
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 定義一個新路徑
ctx.beginPath();
// 設定一個起始點
ctx.moveTo(0, 0);
// 設定一個終點
ctx.lineTo(200, 100);
// 描邊（進行繪製）
ctx.stroke();
</script>
自己動手試一試 »
lineWidth 屬性
lineWidth 屬性定義了線條的寬度。
在呼叫 stroke() 方法之前必須設定它。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();
</script>
自己動手試一試 »
strokeStyle 屬性
strokeStyle 屬性定義了線條的顏色。
在呼叫 stroke() 方法之前必須設定它。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();
</script>
自己動手試一試 »
lineCap 屬性
lineCap 屬性定義了線條的端點樣式（"butt"、"round" 或 "square"）。
預設值為 "butt"。
在呼叫 stroke() 方法之前必須設定它。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();
</script>
自己動手試一試 »
