HTML Canvas 圓形
arc() 方法
arc() 方法用於定義一個圓。
arc() 方法具有以下引數
| 引數 | 描述 |
|---|---|
| x | 必需。圓弧中心的 x 座標 |
| y | 必需。圓弧中心的 y 座標 |
| radius | 必需。圓弧的半徑 |
| startAngle | 必需。圓弧開始的角度（以弧度為單位） |
| endAngle | 必需。圓弧結束的角度（以弧度為單位） |
| counterclockwise | 可選。布林值。如果設定為 true，則在開始和結束角度之間逆時針繪製圓弧。預設值為 false（順時針） |
繪製一個完整的圓
我們可以使用 arc() 方法，將 startAngle 定義為 0，將 endAngle 定義為 2 * PI 來建立一個完整的圓。
要繪製一個圓在 canvas 上，請使用以下方法：
-
beginPath()- 開始一個路徑 -
arc()- 定義一個圓 -
stroke()- 繪製它
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
自己動手試一試 »
使用顏色繪製一個完整的圓
為圓新增填充顏色和描邊顏色。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.stroke();
</script>
自己動手試一試 »
繪製一個半圓
這裡我們將 endAngle 改為 PI（而不是 2 * PI）。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
</script>
自己動手試一試 »
關於圓弧角度的更多資訊
下圖顯示了圓弧的一些角度。
中心: arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)
開始角度: arc(100, 75, 50, 0, 1.5 * Math.PI)
結束角度: arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)
示例
這裡我們想繪製一個從開始角度 0 到結束角度 0.5 * PI 的圓弧。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 0.5 * Math.PI);
ctx.stroke();
</script>
自己動手試一試 »
示例
這裡我們做同樣的事情，但將 counterclockwise 引數設定為 true（它將在此後在開始和結束角度之間逆時針繪製圓弧）。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 0.5 * Math.PI, true);
ctx.stroke();
</script>
自己動手試一試 »
