# CanvasContext.arc(number x, number and number r, number strap number eAngle, boolean counterclockwise)

with Promise style call: Not supported

Mini Program plugin: Support

Create an arc.

Create a circle that specifies the starting radian as 0, terminating radians 2 * Math.PI。
use stroke or fill Method to come in canvas Draw an arc in.

# parameter

# number x

Centroid x coordinate

# number and

Centroid and coordinate

# number r

Radius of a circle

# number strap

Starting radian, unit radian (at 3 o'clock)

# number eAngle

Ending radian

# boolean counterclockwise

Is the direction of the arc counterclockwise?

# sample code

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()

In the light of arc(100, 75, 50, 0, 1.5 * Math.PI)The three key coordinates are as follows:

Green: Center of a circle (100, 75)
Red: Starting radian (0)
Blue: Ending radian (1.5 * Math.PI)