HTML Canvas 形狀

實例

例子 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

親自試一試

Canvas 線條繪制

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

方法

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

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

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

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

更多實例

例子 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

親自試一試

例子 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

親自試一試

提示

如果要繪制矩形，您不必繪制 4 條線。

在下一章中，您將學習使用 drawRect() 方法來繪制矩形。

strokeStyle 屬性

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

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

實例

ctx.beginPath();
// 定義矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定義三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

親自試一試

另請參閱：

CodeW3C.com 的完整 Canvas 參考手冊