进度条

<template>
<view class="round_box">
<canvas class="round_bg" canvas-id="cpbg"></canvas>
<canvas class="round_bar" canvas-id="cpbar"></canvas>
<canvas class="round_line" canvas-id="cpline"></canvas>
<view class="round_txt">
<view class="round_info">{{ round_txt }}%</view>
</view>
</view>
</template>

<script>
export default {
props: {
round_txt: {
type: Number,
default: 50
}
},
mounted: function() {
this.drawroundbg();
this.drawCircle(this.round_txt);
this.drawLine();
},
methods: {
drawroundbg: function() {

var ctx = uni.createCanvasContext('cpbg', this);
ctx.setLineWidth(12);
ctx.setStrokeStyle('#E9E9E9');
ctx.setLineCap('square');
ctx.beginPath();
ctx.arc(110, 110, 70, 0 * Math.PI, 2 * Math.PI, false);
ctx.stroke();
ctx.draw();
},
drawCircle: function(step) {
var ctx = uni.createCanvasContext('cpbar', this);
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();

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");
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);

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>
.round_box {
position: relative;
width: 100%;
height: 300upx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.round_bg {
position: absolute;
width: 220px;
height: 220px;
}
.round_bar {
position: absolute;
width: 220px;
height: 220px;
}
.round_line {
position: absolute;
width: 220px;
height: 220px;
}
.round_txt {
position: absolute;
font-size: 28upx;
color: #999999;
}
.round_info {
font-size: 36upx;
padding-left: 16upx;
letter-spacing: 2upx;
font-size: 52upx;
color: #333333;
}
.round_dot {
width: 16upx;
height: 16upx;
border-radius: 50%;
background-color: #fb9126;
}
</style>