<template>
<div class="circle-progress">
<h2>半环形进度条DEMO</h2>
<canvas id="canvas" width="150" height="150"></canvas>
<div class="btns">
<van-button @click="toCanvas('canvas', '#ffbf00', 10)">10</van-button>
<van-button @click="toCanvas('canvas', '#ffbf00', 20)">20</van-button>
<van-button @click="toCanvas('canvas', '#ffbf00', 30)">30</van-button>
<van-button @click="toCanvas('canvas', '#ffbf00', 40)">40</van-button>
<van-button @click="toCanvas('canvas', '#ffbf00', 50)">50</van-button>
</div>
<div class="btns">
<van-button @click="toCanvas('canvas', '#ffbf00', 60)">60</van-button>
<van-button @click="toCanvas('canvas', '#ffbf00', 70)">70</van-button>
<van-button @click="toCanvas('canvas', '#ffbf00', 80)">80</van-button>
<van-button @click="toCanvas('canvas', '#ffbf00', 90)">90</van-button>
<van-button @click="toCanvas('canvas', '#ffbf00', 100)">100</van-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
canvas:'',
percent:'',
ctx:'',
circleX:'',
circleY:'',
radius:'',
cradius:'',
lineWidth:'',
fontSize:'',
color:'',
process:'',
circleLoading:null,
};
},
mounted() {
this.toCanvas("canvas", "#ffbf00", 80);
},
methods: {
smallcircle1(cx, cy, r) {
this.ctx.beginPath();
this.ctx.lineWidth = 1;
this.ctx.fillStyle = "#06a8f3";
this.ctx.arc(cx, cy, r, 0, Math.PI * 2);
this.ctx.fill();
},
smallcircle2(cx, cy, r) {
this.ctx.beginPath();
this.ctx.lineWidth = 1;
this.ctx.fillStyle = "#fff";
this.ctx.arc(cx, cy, r, 0, Math.PI * 2);
this.ctx.fill();
},
circle(cx, cy, r) {
this.ctx.beginPath();
this.ctx.lineWidth = this.lineWidth;
this.ctx.strokeStyle = "#eee";
this.ctx.arc(cx, cy, r, (Math.PI * 2) / 3, (Math.PI * 1) / 3);
this.ctx.stroke();
},
sector(cx, cy, r, startAngle, endAngle, anti) {
this.ctx.beginPath();
this.ctx.lineWidth = this.lineWidth;
this.ctx.strokeStyle = this.color;
this.ctx.lineCap = "round";
this.ctx.arc(cx,cy,r,(Math.PI * 2) / 3,(Math.PI * 2) / 3 + (endAngle / 100) * ((Math.PI * 5) / 3),false);
this.ctx.stroke();
},
loading(progress) {
if (this.process >= this.percent) {
clearInterval(this.circleLoading);
}
this.ctx.clearRect(0, 0, this.circleX * 2, this.circleY * 2);
this.ctx.font = "normal bold 40px April";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.fillStyle = "#ffbf00";
this.ctx.fillText(parseFloat(this.process).toFixed(0), this.circleX, this.circleY-5);
this.ctx.font = "normal bold " + this.fontSize + "px April";
this.ctx.fillStyle = "#ffbf00";
if(progress <= 20){
this.ctx.fillText('超极低', this.circleX, this.circleY+30);
}
if(progress > 20 && progress <= 30){
this.ctx.fillText('极低', this.circleX, this.circleY+30);
}
if(progress > 30 && progress <= 50){
this.ctx.fillText('低', this.circleX, this.circleY+30);
}
if(progress > 50 && progress <= 60){
this.ctx.fillText('中等', this.circleX, this.circleY+30);
}
if(progress > 60 && progress <= 70){
this.ctx.fillText('及格', this.circleX, this.circleY+30);
}
if(progress > 70 && progress <= 80){
this.ctx.fillText('高', this.circleX, this.circleY+30);
}
if(progress > 80 && progress <= 90){
this.ctx.fillText('极高', this.circleX, this.circleY+30);
}
if(progress > 90 && progress <= 100){
this.ctx.fillText('超极高', this.circleX, this.circleY+30);
}
this.circle(this.circleX, this.circleY, this.radius);
this.sector(this.circleX, this.circleY, this.radius, (Math.PI * 2) / 3, this.process);
this.smallcircle1(
this.cradius + Math.cos(((2 * Math.PI) / 360) * 120) * this.radius,
this.cradius + Math.sin(((2 * Math.PI) / 360) * 120) * this.radius,
0
);
this.smallcircle2(
this.cradius +
Math.cos(((2 * Math.PI) / 360) * (120 + this.process * 3)) * this.radius,
this.cradius +
Math.sin(((2 * Math.PI) / 360) * (120 + this.process * 3)) * this.radius,
2
);
if (this.process / this.percent > 0.9) {
this.process += 0.3;
} else if (this.process / this.percent > 0.8) {
this.process += 0.55;
} else if (this.process / this.percent > 0.7) {
this.process += 0.75;
} else {
this.process += 1.0;
}
},
toCanvas(id, color, progress) {
clearInterval(this.circleLoading);
this.canvas = document.getElementById(id);
this.percent = progress
this.ctx = canvas.getContext("2d");
this.circleX = canvas.width / 2;
this.circleY = canvas.height / 2;
this.radius = 60;
this.cradius = 75;
this.lineWidth = 6;
this.fontSize = 16;
this.process = 0.0;
this.color = color;
if(progress < 50){
this.circleLoading = window.setInterval(() => {
this.loading(progress);
}, 20);
}
if(progress >= 50 && progress < 70){
this.circleLoading = window.setInterval(() => {
this.loading(progress);
}, 10);
}
if(progress >= 70){
this.circleLoading = window.setInterval(() => {
this.loading(progress);
}, 6);
}
}
}
};
</script>
<style lang="less">
.circle-progress{
h2{
color: #ffbf00;
margin: 160px 0 60px 0;
}
.btns{
margin: 20px 0;
.van-button--default{
background-color: #ffbf00;
color: #fff;
}
}
}
</style>

转自:https://www.codenong.com/cs105933451/
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?