使用canvas制作圆形进度条_canvas 圆环 linecap影响进度

1. 背景

        在本公司的定制app平台中，需要在日历页面中显示用户的运动进度，平常的直线进度无法满足要求。

2. 核心思路

1. 先使用 canvas 绘制一个圆
2. 再使用 canvas 绘制一个进度圆

3. 代码实现

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