半圆形进度条(vue)
5星 · 超过95%的资源 127 浏览量
2021-01-08
08:34:07
上传
评论
收藏 45KB PDF 举报 
半圆形进度条半圆形进度条(vue)
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.moveTo(cx + r, cy);
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();
//ctx.moveTo(cx + r, cy);
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();
//ctx.moveTo(cx + r, cy);
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();
//ctx.moveTo(cx, cy + r); // 从圆形底部开始画
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);
}
weixin_38704701
- 粉丝: 8
- 资源: 982
- 1
- 2
前往页