HTML Canvas 形狀
Canvas 形狀
要繪製由直線組成的各種形狀，我們使用以下方法
| 方法 | 描述 | 繪製 |
|---|---|---|
beginPath() |
宣告我們即將開始繪製一條新路徑（不進行繪製） | 否 |
moveTo(x,y) |
在 canvas 中設定形狀的起點（不進行繪製） | 否 |
lineTo(x,y) |
設定形狀的子點或終點（不進行繪製） | 否 |
stroke() |
繪製線條（從起點，透過子點到終點）。預設的描邊顏色是黑色 | 是 |
示例
<script>
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();
</script>
自己動手試一試 »
更多示例
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();
</script>
自己動手試一試 »
strokeStyle 屬性
strokeStyle 屬性定義了描邊的顏色。
它必須在呼叫 stroke() 方法之前設定。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
// 定義一個矩形
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定義一個三角形
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();
</script>
自己動手試一試 »
