半圓形進度條 vue加強版

="circle-progress"

>
半環形進度條demo
<
/h2>
"canvas" width=
"150" height=
"150"
>
<
/canvas>
="btns"
>
"tocanvas('canvas', '#ffbf00', 10)"
>
10<
/van-button>
"tocanvas('canvas', '#ffbf00', 20)"
>
20<
/van-button>
"tocanvas('canvas', '#ffbf00', 30)"
>
30<
/van-button>
"tocanvas('canvas', '#ffbf00', 40)"
>
40<
/van-button>
"tocanvas('canvas', '#ffbf00', 50)"
>
50<
/van-button>
<
/div>
="btns"
>
"tocanvas('canvas', '#ffbf00', 60)"
>
60<
/van-button>
"tocanvas('canvas', '#ffbf00', 70)"
>
70<
/van-button>
"tocanvas('canvas', '#ffbf00', 80)"
>
80<
/van-button>
"tocanvas('canvas', '#ffbf00', 90)"
>
90<
/van-button>
"tocanvas('canvas', '#ffbf00', 100)"
>
100<
/van-button>
<
/div>
<
/div>
<
/template>
export
default;}
,mounted()
, methods:
,smallcircle2
(cx, cy, r)
,//畫圓
circle
(cx, cy, r)
,//畫弧線
sector
(cx, cy, r, startangle, endangle, anti)
,//重新整理
loading
(progress)
//清除canvas內容
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)
if(progress >
20&& progress <=30)
if(progress >
30&& progress <=50)
if(progress >
50&& progress <=60)
if(progress >
60&& progress <=70)
if(progress >
70&& progress <=80)
if(progress >
80&& progress <=90)
if(progress >
90&& progress <=
100)
//圓形
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)
elseif(
this
.process /
this
.percent >
0.8)
elseif(
this
.process /
this
.percent >
0.7)
else},
/** 生成環形進度條 **/
tocanvas
(id, color, progress),20
);}if
(progress >=
50&& progress <70)
,10);
}if(progress >=70)
,6);
}}}}
;<
/script>
"less"
>
.circle-progress
.btns}}
<
/style>

半圓形進度條 vue

circle progress canvas width 150 height 150 canvas div template export default mounted methods smallcircle2 cx,cy,r 畫圓 circle cx,cy,r 畫弧線 sector cx,cy...

Kotlin實現的半圓形進度條

github位址 compile com.blackflagbin semicircleprogressview 0.0.3 複製 android id id progress android layout width 300dp android layout height wrap content...

圓形進度條

public class circleprogress extends view public int getmheight public void setmheight int mheight public int getmwidth public void setmwidth int mwidt...