CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)

创建一条弧线。

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

参数

number x

圆心的 x 坐标

number y

圆心的 y 坐标

number r

圆的半径

number sAngle

起始弧度，单位弧度（在3点钟方向）

number eAngle

终止弧度

boolean counterclockwise

弧度的方向是否是逆时针

示例代码

  1. const ctx = wx.createCanvasContext('myCanvas')
  3. // Draw coordinates
  4. ctx.arc(100, 75, 50, 0, 2 * Math.PI)
  5. ctx.setFillStyle('#EEEEEE')
  6. ctx.fill()
  8. ctx.beginPath()
  9. ctx.moveTo(40, 75)
  10. ctx.lineTo(160, 75)
  11. ctx.moveTo(100, 15)
  12. ctx.lineTo(100, 135)
  13. ctx.setStrokeStyle('#AAAAAA')
  14. ctx.stroke()
  16. ctx.setFontSize(12)
  17. ctx.setFillStyle('black')
  18. ctx.fillText('0', 165, 78)
  19. ctx.fillText('0.5*PI', 83, 145)
  20. ctx.fillText('1*PI', 15, 78)
  21. ctx.fillText('1.5*PI', 83, 10)
  23. // Draw points
  24. ctx.beginPath()
  25. ctx.arc(100, 75, 2, 0, 2 * Math.PI)
  26. ctx.setFillStyle('lightgreen')
  27. ctx.fill()
  29. ctx.beginPath()
  30. ctx.arc(100, 25, 2, 0, 2 * Math.PI)
  31. ctx.setFillStyle('blue')
  32. ctx.fill()
  34. ctx.beginPath()
  35. ctx.arc(150, 75, 2, 0, 2 * Math.PI)
  36. ctx.setFillStyle('red')
  37. ctx.fill()
  39. // Draw arc
  40. ctx.beginPath()
  41. ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
  42. ctx.setStrokeStyle('#333333')
  43. ctx.stroke()
  45. ctx.draw()

CanvasContext.arc - 图1

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

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