小程序畫布創建一條弧線CanvasContext.arc

CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
創建一條弧線。

小程序插件：支持
創建一個圓可以指定起始弧度為 0，終止弧度為 2 * Math.PI。
用 stroke 或者 <code>fill 方法來在 canvas 中畫弧線。
參數
number x
圓心的 x 坐標

number y
圓心的 y 坐標

number r
圓的半徑

number sAngle
起始弧度，單位弧度（在3點鐘方向）

number eAngle
終止弧度

boolean counterclockwise
弧度的方向是否是逆時針

示例代碼
const ctx = wx.createCanvasContext('myCanvas')
 
// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()
 
ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()
 
ctx.setFontSize(12)
ctx.setFillStyle('black')
ctx.fillText('0', 165, 78)
ctx.fillText('0.5*PI', 83, 145)
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*PI', 83, 10)
 
// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()
 
ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()
 
ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()
 
// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()
 
ctx.draw()


針對 arc(100, 75, 50, 0, 1.5 * Math.PI)的三個關鍵坐標如下：

綠色: 圓心 (100, 75)
紅色: 起始弧度 (0)
藍色: 終止弧度 (1.5 * Math.PI)