全部产品

CanvasContext.arc

画一条弧线。

创建一个圆,可以用 arc() 方法指定起始弧度为 0,终止弧度为 2 * Math.PI。用 stroke() 或者 fill() 方法在 canvas 中画弧线。

入参

Object 类型,属性如下:

属性类型说明
xNumber圆 x 坐标。
yNumber圆 y 坐标。
rNumber圆半径。
sAngleNumber起始弧度,单位弧度(在3点钟方向)。
eAngleNumber终止弧度。
counterclockwiseBoolean可选,指定弧度的方向是逆时针还是顺时针,默认为 false。

示例代码

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

显示效果如下图所示:

image

针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下:

  • 绿色: 圆心 (100, 75)
  • 红色: 起始弧度 (0)
  • 蓝色: 终止弧度 (1.5 * Math.PI)