uni-app canvas实现环形刻度进度条_uniapp 环形进度条

因为项目中需要使用到一个环形刻度进度条，所以就需要实现这个需求，在uni-app插件市场找了一圈，也没有找到这种插件，只找到了一个环形进度条，所以就在该插件上修改，实现了一个环形刻度进度条

更多文章请访问 深的个人博客

局限性：在小程序中使用时，不要将其放在会滚动的区域里，否则会发生错位的现象（真机中），app端中测试：ios14系统会出现显示不全的情况（原因不明），如果要考虑兼容这两种情况可以点击以下的链接（另外使用css和js写的进度条，样式是类似的）

使用css和定时器实现环形刻度进度条

参考

uni-app插件市场：弧形进度条

微信小程序canvas画原型带刻度进度条

效果图

代码

<template>
	<view class="progress_box">
		<canvas class="progress_bg" canvas-id="cpbg"></canvas>
		<canvas class="progress_bar" canvas-id="cpbar"></canvas>
		<canvas class="progress_line" canvas-id="cpline"></canvas>
		<view class="progress_txt">
			<view class="progress_info">{{ progress_txt }}%</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		progress_txt: {
			type: Number,
			default: 80
		}
	},
	mounted: function() {
		this.drawProgressbg();
		this.drawCircle(this.progress_txt); //参数为1-100
		this.drawLine();
	},
	methods: {
		drawProgressbg: function() {
			// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
			var ctx = uni.createCanvasContext('cpbg', this);
			ctx.setLineWidth(12); // 设置圆环的宽度
			ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
			// ctx.setLineCap('round'); // 设置圆环端点的形状
			ctx.setLineCap('square'); // 设置圆环端点的形状
			ctx.beginPath(); //开始一个新的路径
			ctx.arc(110, 110, 70, 0 * Math.PI, 2 * Math.PI, false);
			//设置一个原点(110,110)，半径为100的圆的路径到当前路径
			ctx.stroke(); //对当前路径进行描边
			ctx.draw();
		},
		drawCircle: function(step) {
			var ctx = uni.createCanvasContext('cpbar', this);
			// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
			var gradient = ctx.createLinearGradient(0, 0, 130, 0);

			let increase = 0.05;
			let end = (step / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度
			let current = -Math.PI / 2; // 起始角度
			let timer = setInterval(() => {
				gradient.addColorStop('0', '#00F2FE');
				gradient.addColorStop('1.0', '#4FACFE');
				ctx.setLineWidth(12);
				ctx.setStrokeStyle(gradient);
				ctx.setLineCap('square');
				ctx.beginPath();
				// 参数step 为绘制的百分比
				if (current < end) {
					current = current + increase;
				}
				if (current >= end) {
					current = end;
					clearInterval(timer);
				}
				ctx.arc(110, 110, 70, -Math.PI / 2, current, false);
				ctx.stroke();
				ctx.draw();
			}, 20);
		},
		// 画刻度
		drawLine() {
			var context = uni.createCanvasContext("cpline",this);
			var r = 70;
			var x0 = 110;
			var y0 = 110;
			var x;
			var y;
			var lineWidth = 12;

			for (let i = 0; i < 60; i++) {
			  context.beginPath();
			  context.setLineWidth(lineWidth);
			  context.setStrokeStyle("#FFFFFF");
                
			  x = x0 - r * Math.sin(((6 * (i + 1) - 3) * Math.PI) / 180);
			  y = y0 - r * Math.cos(((6 * (i + 1) - 3) * Math.PI) / 180);

			  // console.log('x0:' + x0 + '   y0:' + y0 + '    x:' + x + '    y:' + y);
			  context.moveTo(x, y);
			  context.arc(
			    x0,
			    y0,
			    r,
			    ((270 - 6 * (i + 1) + 3) * Math.PI) / 180,
			    ((270 - 6 * i) * Math.PI) / 180,
			    false
			  );
			  context.stroke();
			  context.closePath();
			}
			context.stroke();
			context.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: 220px;
	height: 220px;
}
.progress_bar {
	position: absolute;
	width: 220px;
	height: 220px;
}
.progress_line {
	position: absolute;
	width: 220px;
	height: 220px;
}
.progress_txt {
	position: absolute;
	font-size: 28upx;
	color: #999999;
}
.progress_info {
	font-size: 36upx;
	padding-left: 16upx;
	letter-spacing: 2upx;
	font-size: 52upx;
	color: #333333;
}
.progress_dot {
	width: 16upx;
	height: 16upx;
	border-radius: 50%;
	background-color: #fb9126;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149