绘制圆弧
最后更新于：2022-04-02 03:28:43
[TOC]
## 绘制圆弧
方式一:
`arc(x, y, r, startAngle, endAngle, anticlockwise)`
以`(x, y)`为圆心，以`r`为半径，从`startAngle`弧度开始到`endAngle`弧度结束。`anticlosewise`是布尔值，`true`表示逆时针，`false`表示顺时针(默认是顺时针)。
注意：
1. 这里的度数都是弧度。
2. `0`弧度是指的`x`轴正方向。
```
radians=(Math.PI/180)*degrees //角度转换成弧度
```
方式二:
`arcTo(x1, y1, x2, y2, radius)`
根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。
## 实例
方式一绘制
```
var draw=()=>{
let canvas = document.querySelector("#tutorial");
if(!canvas.getContext)return;
/** * @type CanvasRenderingContext2D */
let ctx = canvas.getContext("2d");
ctx.beginPath()
ctx.arc(50,100,30,0,Math.PI*3/2,false)
ctx.stroke()
}
```
方式二绘制
```
var draw=()=>{
let canvas = document.querySelector("#tutorial");
if(!canvas.getContext)return;
/** * @type CanvasRenderingContext2D */
let ctx = canvas.getContext("2d");
ctx.beginPath()
ctx.moveTo(50,50)
ctx.arcTo(200,50,200,250,100)
ctx.lineTo(200,200)
ctx.stroke()
}
```
绘制为一个圆弧加两条切线
';