圆形与圆弧
最后更新于：2022-04-02 01:27:58
## 圆形与圆弧
**arc()**
绘制圆弧或者圆，我们使用`arc()`方法
```
arc(x, y, radius, startAngle, endAngle, anticlockwise)
```
- x：圆弧中心（圆心）的 x 轴坐标。
- y：圆弧中心（圆心）的 y 轴坐标。
- radius：圆弧的半径。
- startAngle：圆弧的起始点， x轴方向开始计算，单位以弧度表示。
- endAngle：圆弧的终点， 单位以弧度表示。
- anticlockwise 可选：可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。
注意：`arc()`函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:
```
radians=(Math.PI/180)*degrees。
```
实例：canvas-demo/arc.html：
```
cxt.beginPath();
cxt.arc(70,70,50,0,Math.PI/2,true);
cxt.stroke();
cxt.beginPath();
cxt.arc(180,70,50,0,Math.PI/2,false);
cxt.stroke();
cxt.beginPath();
cxt.arc(300,70,50,0,Math.PI/2,true);
cxt.fill();
cxt.beginPath();
cxt.arc(400,70,50,0,Math.PI/2,false);
cxt.fill();
```
**arcTo()**
`arcTo()`方法用于在画布上创建介于两个切线之间的弧/曲线。
```
arcTo(x1, y1, x2, y2, radius)
```
- x1：第一个控制点的 x 轴坐标。
- y1：第一个控制点的 y 轴坐标。
- x2：第二个控制点的 x 轴坐标。
- y2：第二个控制点的 y 轴坐标。
- radius：圆弧的半径。
实例：canvas-demo/arcTo.html：
```
```
';