实现音乐播放器圆形进度条开始暂停

<template>
	<view class="">
		<view>
			<view @click="add()" class="progress_info">停止,开始</view>
		</view>
		<view class="progress_box">
			<canvas class="progress_bg" canvas-id="cpbg"></canvas>
			<canvas class="progress_bar" canvas-id="cpbar"></canvas>



		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				increase: 0.17,
				end: 1.5 * Math.PI,
				timer: null,
				newCurrent: '',
				isClearInterval: false
			};
		},
		
		mounted: function() {
			clearInterval(this.timer)
			this.timer = null
			this.drawProgressbg();
			this.drawCircle(-Math.PI / 2) //参数为1-100

		},
		methods: {
			add() {
				console.log('11')
				this.isClearInterval = !this.isClearInterval
				this.drawProgressbg();
				this.drawCircle(this.newCurrent) //参数为1-100
			},
			drawCircle: function(step) {
				let ctx = uni.createCanvasContext('cpbar', this);
				// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
				let gradient = ctx.createLinearGradient(0, 0, 130, 0);
				if (this.isClearInterval) {
					console.log(this.isClearInterval)
					clearInterval(this.timer)
					this.timer = null
					gradient.addColorStop('0', '#00F2FE');
					gradient.addColorStop('1.0', '#4FACFE');
					ctx.setLineWidth(3);
					ctx.setStrokeStyle(gradient);
					ctx.setLineCap('square');
					ctx.beginPath();
					ctx.arc(40, 40, 15, -Math.PI / 2, step, false);
					ctx.stroke();
					ctx.draw();
				} else {
					console.log('11')
					let current = step; // 起始角度
					let index = 0
					this.timer = setInterval(() => {
						gradient.addColorStop('0', '#00F2FE');
						gradient.addColorStop('1.0', '#4FACFE');
						ctx.setLineWidth(3);
						ctx.setStrokeStyle(gradient);
						ctx.setLineCap('square');
						ctx.beginPath();
						index++
						console.log(index)
						// 参数step 为绘制的百分比
						if (current < this.end) {
							current = current + this.increase;
							this.newCurrent = current
							console.log(current)
						}
						if (current >= this.end) {
							current = this.end;
							clearInterval(this.timer)
							this.timer = null
						}
						ctx.arc(40, 40, 15, -Math.PI / 2, current, false);
						ctx.stroke();
						ctx.draw();
					}, 1000);
				}
			},
			drawProgressbg: function() {
				// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
				var ctx = uni.createCanvasContext('cpbg', this);
				ctx.setLineWidth(3); // 设置圆环的宽度
				ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
				// ctx.setLineCap('round'); // 设置圆环端点的形状
				ctx.setLineCap('square'); // 设置圆环端点的形状
				ctx.beginPath(); //开始一个新的路径
				ctx.arc(40, 40, 15, 0 * Math.PI, 2 * Math.PI, false);
				//设置一个原点(11,110)，半径为100的圆的路径到当前路径
				ctx.stroke(); //对当前路径进行描边
				ctx.draw();
			},
		}
	};
</script>

<style>
	.progress_box {
		position: relative;
		width: 100%;
		height: 300upx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.progress_bg {
		position: absolute;
		width: 60px;
		height: 60px;
	}

	.progress_bar {
		position: absolute;
		width: 60px;
		height: 60px;
	}
</style>