半圆形进度条半圆形进度条(vue加强版加强版)
半环形进度条半环形进度条DEMO
10
20
30
40
50
60
70
80
90
100
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;
评论0