[TOC]
# 圓形
`CanvasRenderingContext2D.arc()`用來繪制圓弧。由于圓本質上就是個封閉圓弧，因此，此方法也可以用來繪制正圓。
語法：
```js
context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
```
參數解釋：
- x *Number*：圓弧對應的圓心橫坐標
- y *Number*：圓弧對應的圓心縱坐標
- radius *Number*：圓弧的半徑大小
- startAngle *Number*：圓弧開始的角度，單位是弧度
- endAngle *Number*：圓弧結束的角度，單位是弧度
- anticlockwise（可選） *Boolean*：弧度的繪制是按順時針還是逆時針，默認值為 false，表示按順時針方向繪制
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圓形</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 1px dashed gray;"></canvas>
</body>
</html>
<script>
window.onload = function () {
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
cxt.beginPath()
cxt.arc(120, 80, 50, 0, 360*Math.PI/180, true) // 120*Math.PI/180 表示 120°
cxt.strokeStyle = 'HotPink'
cxt.stroke() // 使用 stroke() 來描邊
cxt.closePath()
cxt.beginPath()
cxt.arc(30, 30, 30, 0, 360*Math.PI/180, true)
cxt.fillStyle = '#9966FF'
cxt.fill() // 使用 fill() 來填充
}
</script>
```
繪制效果如下：
# 弧線
弧線可以使用`arc()`和`arcTo()`方法來繪制。
## arc()
我們使用`arc()`方法繪制弧線時需要注意不適用`closePath()`來關閉路徑，否則圖形會自動閉合。
```js
cxt.beginPath()
cxt.arc(50, 50, 50, 0, 60*Math.PI/180, false)
cxt.stroke()
```
如果加上`closePath()`效果是這樣的：
```js
cxt.beginPath()
cxt.arc(50, 50, 50, 0, 60*Math.PI/180, false)
cxt.closePath()
cxt.stroke()
```
## arcTo()
[https://www.canvasapi.cn/CanvasRenderingContext2D/arcTo#&syntax](https://www.canvasapi.cn/CanvasRenderingContext2D/arcTo#&syntax)
```js
context.arcTo(x1, y1, x2, y2, radius)
```
參數說明：
- x1 *Number*：第 1 控制點的橫坐標
- y1 *Number*：第 1 個控制點的縱坐標
- x2 *Number*：第 2 個控制點的橫坐標
- y2 *Number*：第 2 個控制點的縱坐標
- radius *Number*：圓弧的半徑大小
## 貝塞爾曲線
