CanvasContext.arc
Draw arc.
In order to create a circle, you can specify the start arc to 0 using arc() and specify the end arc to 2 * Math.PI. Use stroke() or fill() to draw arc in the canvas.
Parameters
It is Object type.
| Property | 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 | The start arc. |
| eAngle | Number | The end arc. |
| counterclockwise | Boolean | Optional, by default is false. Used to set whether use clockwise. |
Sample Code
copy
//.js
const ctx = my.createCanvasContext('awesomeCanvas')
const ctx = my.createCanvasContext('myCanvas')
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)
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()
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()
ctx.draw()