WeChat Open Platform

Mini Programs Documentation

canvasContext.arc

Definition

Draws an arc.

Tip: You can create a circle using the arc() method by specifying the real radian as 0 and the end radian as 2 * Math.PI.

Tip: Use the stroke() or fill() methods to draw arcs in the canvas.

Parameters

Parameter Type Description
x Number The x-coordinate of the circle
y Number The y-coordinate of the circle
r Number The radius of the circle
sAngle Number Start radian, unit radians (at 3 o'clock)
eAngle Number End radian
counterclockwise Boolean Optional The direction of the radian specified is counterclockwise or clockwise. The default is false, i.e. clockwise.

Examples

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

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

  • Green: center of circle (100, 75)
  • Red: start radian (0)
  • Blue: end radian (1.5 * Math.PI)