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()
}

效果