canvas绘制圆弧

canvas 的 arc() 方法创建弧/曲线（用于创建圆或部分圆）。

JavaScript 语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。false = 顺时针，true = 逆时针。默认为顺时针。

<canvas id="box" width="600px" height="400px" style="border: 1px solid pink;"></canvas>
<script>
    let cavDOM = document.getElementById('box');
    let cav = cavDOM.getContext('2d')
    cav.fillStyle = 'skyblue'

    // 设置起始路径
    cav.beginPath()
    // 绘制圆弧
    // 圆心坐标（100,100），半径50，起始角度0，结束角度270，顺时针
    cav.arc(100,100,50,0,Math.PI*3/2,false)
    // 填充
    cav.fill()
    // 设置结束路径
    cav.closePath()

    cav.beginPath()
    cav.arc(200,100,50,0,Math.PI*3/2,true)
    cav.fill()
    cav.closePath()

    cav.beginPath()
    cav.arc(100,300,50,0,Math.PI/2,true)
    cav.fill()
    cav.closePath()

    cav.beginPath()
    cav.arc(200,300,50,0,Math.PI/2,false)
    cav.fill()
    cav.closePath()

</script>