圆心位置在最有

// context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

哈哈，画了一个没什么用的圆

window.onload = function () {
    const canvas = document.getElementById("canvas")
    const context = canvas.getContext('2d')
    context.lineWidth = 6
    const count = 100
    let p =0
    let n =0.12 * Math.PI

    for (let i = 0; i <= count; i++) {
        const r = Math.floor(Math.random() * 255)
        const g = Math.floor(Math.random() * 255)
        const b = Math.floor(Math.random() * 255)
        const c = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}000`

        context.beginPath()
        context.arc(330, 300, 200, p , n,)
        context.strokeStyle = c.slice(0, 7)
        p =  n
        n =2 * Math.PI*(i+1)/count
        context.stroke()
    }
}

arc多例效果

arc代码2

arc代码例子

Draw an arc

Draw an arc

context.arc(

centerx,centery,radius,

startingAngle,endingAngle,

anticlockwise=false//顺时针，true为逆时针

)

centerx：圆心横坐标

centery：圆心纵坐标

radius：半径

startingAngle：弧度值始

endingAngle：弧度值终

anticlockwise：画弧线采用顺时针或逆时针，【可选】默认为false，顺时针

使用closepath会将不封闭的首尾进行封闭，

所以只使用beginpath告诉浏览器开始新路径，

不使用closepat关闭路径h

绘制弧度，使用arc

传入圆心x圆心y半径

开始角度，结束角度

默认为false为顺时针

context.arc()绘制圆形

填充不需要closePath，会自动调用

closePath会封闭起点和终点

弧度绘制使用的是弧度值（不是角度值），默认是顺时针绘制

绘制弧线使用的函数

弧的绘制 context.arc(原点坐标X，原点坐标Y，半径，起始弧度，结束弧度，[绘制方向(默认false--顺时针)])    （弧度值写为n*Math.PI）

canvas始终默认圆形右侧顶点为起点0pi--下方顶点0.5pi--左侧顶点1pi--上方顶点1.5pi--右侧顶点2pi 

当绘制多个弧形时，如果所绘制的路径不是封闭状态，context.closePath()方法会将其首尾用一条线段连接起来。当需要绘制多个不封闭弧形时，只使用context.beginPath()方法即可

弧形的颜色填充一样使用context.fillStyle = 'color' 与 context.fill() 方法

2-3 绘制弧和圆

closePath 对 fill不起作用

2-3 绘制弧和圆

2-3 绘制弧和圆

2-3 绘制弧和圆

2-3 绘制弧和圆

2-3 绘制弧和圆

2-3 绘制弧和圆

2-3 绘制弧和圆

2-3 绘制弧和圆

context.arc(

        centexr,centery,radius,

        startingAngle,endingAngle,

        anticlockwise=false //默认顺时针

)

绘制月食过程

 只写beginPath() 路径不会封闭，加了closePath 路径必定封闭

以300,300坐标为圆心，以200为半径，从0开始画弧，画1.5π  也就是四分之三个圆