uniapp实现环形进度条

代码

 <canvas style="width: 84px; height: 84px;" canvas-id="circlefCanvas" id="circlefCanvas"></canvas>

/**
 * 环形进度条
 * arc(x, y, r, startAngle, endAngle, anticlockwise):
 * 以(x, y) 为圆心，以r 为半径，90°代表0.5 * PI
 * 从 startAngle 弧度开始到endAngle弧度结束。
 * anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针
 */
const circleProgressbar = (score: string, value: number) => {
  // 画整个圆环
  const ctx = uni.createCanvasContext('circlefCanvas')
  ctx.beginPath()
  ctx.arc(42, 42, 30, 0, 2 * Math.PI) // 42为canvas宽度一班代表居中
  ctx.setStrokeStyle('#FAF7F7')
  ctx.setLineWidth(5)
  ctx.stroke()
  // 进度
  ctx.beginPath()
  ctx.arc(42, 42, 30, 0, 1.5 * Math.PI)
  ctx.setStrokeStyle('#E8736F')
  ctx.setLineWidth(5)
  ctx.stroke()

  // 中心字体
  ctx.setFillStyle('E8736F')
  ctx.setFontSize(17)
  ctx.setTextAlign('center')
  ctx.fillText(`${score}分`, 42, 50)
  ctx.stroke()
  ctx.draw()
}

效果