[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*：圆弧的半径大小
## 贝塞尔曲线
