May 19, 2021 WeChat Mini Program Development Document
Drawing interfaces and methods
Draw an arc.
Tip
: Creating a circle can specify
arc()
arc of 0 and a termination arc of 2 x
2 * Math.PI
Tip:
Draw
stroke()
canvas
fill()
or fill() method.
Parameters | Type | Description |
---|---|---|
Ⅹ | Number | The x coordinates of the circle |
Y | Number | The y coordinates of the circle |
R | Number | The radius of the circle |
sAngle | Number | Start radian, unit radian (at 3 o'clock) |
eAngle | Number | End the radian |
counterclockwise | Boolean | Optional. S pecify whether the direction of the arc is counterclockwise or clockwise. The default is false, which is clockwise. |
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
arc(100, 75, 50, 0, 1.5 * Math.PI)
are as follows: