="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, r, startangle, endangle, anti)
,//重新整理
loading
(progress)
//清除canvas內容
this
.ctx.
clearrect(0
,0,this
.circlex *2,
this
.circley *2)
;//中間的字
this
.ctx.font =
this
.fontsize +
"px april"
;this
.ctx.textalign =
"center"
;this
.ctx.textbaseline =
"middle"
;this
.ctx.fillstyle =
"#999"
;this
.ctx.
filltext
(parsefloat
(this
.process)
.tofixed(0
)+"%",
this
.circlex,
this
.circley)
;//圓形
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
);}}
};<
/script>
"less"
>
<
/style>
半圓形進度條 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 ...
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...