Use canvas to make a circular progress bar

1. Background

        In our company's customized app platform, the user's exercise progress needs to be displayed on the calendar page, and the usual linear progress cannot meet the requirements.

2. Core ideas

1. First use canvas to draw a circle
2. Then use canvas to draw a progress circle

3. Code implementation

<canvas ref="canvasDom" :width="width" :height="height"></canvas>

const xo = ref(width/ 2) // 圆心坐标
const yo = ref(height/ 2) // 圆心坐标
// lineWidth 线宽
const r = ref((width - lineWidth) / 2)

// 圆
const ctx = canvasDom.value.getContext('2d')
ctx.clearRect(0, 0, width, height)
ctx.beginPath()
ctx.arc(xo.value, yo.value, r.value, 0, Math.PI * 2, true)
ctx.strokeStyle = "red"
ctx.lineWidth = lineWidth
ctx.stroke()

// 进度条
ctx.beginPath()
ctx.arc(xo.value, yo.value, r.value, Math.PI * 1.5, Math.PI * (1.5 + progress * 0.02), false)
ctx.strokeStyle = "green"
ctx.lineWidth = lineWidth
// 设置线的末端
ctx.lineCap = "round"
ctx.stroke()