Canvas--圓弧和圓

一、arc(x,y,r,sAngle,eAngle,counterclockwise)：繪製圓弧和圓

　　x----圓的中心的 x 座標。

　　y----圓的中心的 y 座標。

　　r----圓的半徑。

　　sAngle----起始角，單位爲弧度。

　　eAngle----結束角。

　　counterclockwise----可選。規定應該逆時針仍是順時針繪圖。false = 順時針(默認)，true = 逆時針。

 1 context.lineWidth = 2
 2 for(let i=0;i<10;i++){
 3     context.beginPath()
 4     context.strokeStyle = `rgb(${50*i},100,${25*i})`
 5     // 默認順時針繪製
 6     context.arc(60 + 110*i,100,50,0,2*Math.PI*(i+1)/10)
 7     context.stroke()
 8 }
 9 
10 for(let i=0;i<10;i++){
11     context.beginPath()
12     context.strokeStyle = `rgb(${25*i},100,${50*i})`
13     // 逆時針繪製
14     context.arc(60 + 110*i,250,50,0,2*Math.PI*(i+1)/10,true)
15     context.stroke()
16 }

二、利用arc()繪製圓角矩形：

 1 context.lineWidth = 2
 2 
 3 const createRoundRect = (x, y, width, height, r, ctx) => {
 4     ctx.beginPath()
 5     ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI)
 6     ctx.arc(x + width - r, y + r, r, 1.5 * Math.PI, 0)
 7     ctx.arc(x + width - r, y + height - r, r, 0, 0.5 * Math.PI)
 8     ctx.arc(x + r, y + height - r, r, 0.5 * Math.PI, Math.PI)
 9     ctx.closePath()
10     ctx.stroke()
11 }
12 
13 createRoundRect(50, 50, 200, 300, 20, context)
14 createRoundRect(300, 50, 200, 300, 100, context)

三、arcTo(x1,y1,x2,y2,r)：繪製介於兩個切線之間的弧

　　x1----弧的起點的 x 座標。

　　y1----弧的起點的 y 座標。

　　x2----弧的終點的 x 座標。

　　y2----弧的終點的 y 座標。

　　 r-----弧的半徑。

1 context.lineWidth = 2
2 context.moveTo(50,50)
3 context.lineTo(100,50)
4 context.arcTo(150,50,150,70,50)
5 context.lineTo(150,200)
6 context.stroke()

(x1,y1)、(x2,y2)究竟是哪兩點？見下圖：

所以，只須要y2大於y1，結果都是相同的。

1 for (let i = 0; i < 10; i++) {
2     context.beginPath()
3     context.moveTo(50 + 100 * i, 50)
4     context.lineTo(100 + 100 * i, 50)
5     context.arcTo(150 + 100 * i, 50, 150 + 100 * i, 51 + 20 * i, 50)
6     context.lineTo(150 + 100 * i, 200)
7     context.stroke()
8 }