介绍 & lt; view 类=皐rap"比;
,& lt; view 类=癱ircle-box"比;
,& lt; canvas 类=癱ircle",风格=翱矶?200 px;,身高:200 px;“, canvas-id=癱anvasArcCir"比;
,& lt;/canvas>
,& lt; canvas 类=癱ircle",风格=皕 - index:, 5;,宽度:200 px;,身高:200 px;“, canvas-id=癱anvasCircle"比;
,& lt;/canvas>
,& lt; view 类=癲raw_btn", bindtap=癲rawCircle"在开始动态绘制& lt;/view>
,& lt;/view>
& lt;/view> page {
,宽度:100%;
,高度:100%;
,背景颜色:# fff;
}
.circle-box {
,text-align:中心;
大众,margin-top: 10;
}
.circle {
,位置:绝对;
,左:0;
,右:0;
保证金:大敌;汽车;
}
.draw_btn {
大众,宽度:35;
,位置:绝对;
上图:大敌;33大众;
,右:0;
,左:0;
保证金:大敌;汽车;
,边界:1 px # 000,固体;
大众,这个特性:5;
} //获取应用实例
var app =, getApp ()
var 区间;
var varName;
var ctx =, wx.createCanvasContext (& # 39; canvasArcCir& # 39;);
页面({
,数据:{
},
,drawCircle: function (), {
,clearInterval (varName);
,function drawArc (s), e), {
,ctx.setFillStyle(& # 39;白色# 39;);
,ctx.clearRect (0, 0, 200, 200);
,ctx.draw ();=,var x 100年,y =, 100年,radius =, 96;
,ctx.setLineWidth (5);
,ctx.setStrokeStyle (& # 39; # d81e06& # 39;);
,ctx.setLineCap(& # 39;轮# 39;);
,ctx.beginPath ();
,ctx.arc(半径,x,, y,,,,,,假);
,ctx.stroke ()
,ctx.draw ()
,}
,var step =, 1, startAngle =, 1.5, *, Math.PI,, endAngle =, 0;=,var animation_interval 1000年,n =, 60;
,var animation =, function (), {
,if (step & lt;=, n), {=,,endAngle step *, 2, *, Math.PI /, n +, 1.5, *, Math.PI;
,drawArc (startAngle, endAngle);
+ +,步骤;
,}else {
,clearInterval (varName);
,}
,};=,,varName setInterval(动画,animation_interval);
},
,onReady: function (), {
,//创建并返回绘图上下文上下文对象。
,var cxt_arc =, wx.createCanvasContext (& # 39; canvasCircle& # 39;);
,cxt_arc.setLineWidth (6);
,cxt_arc.setStrokeStyle (& # 39; # eaeaea& # 39;);
,cxt_arc.setLineCap(& # 39;轮# 39;);
,cxt_arc.beginPath ();
,cxt_arc.arc (100,, 100,, 96,, 0,, 2, *, Math.PI,,假);
,cxt_arc.stroke ();
,cxt_arc.draw ();
},
,onLoad: function (选项),{
,}
})
这篇文章主要介绍了小程序怎么实现实时圆形进度条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<>强效果图如下
点击中间按钮开始绘制
绘制过程
绘制结束
<强>实现思路
建立两个帆布标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。
<强> WXML代码
<强> wxs代码
<强>特别注意:底层的帆布最好使用
z - index: 5;放置于底层
<>强JS代码
<>强注意的要点
1,关于小程序帆布绘制,请观看微信小程序官方文档绘制
2,开始绘制的路径可以根据JS代码中的变量startAngle来选择从哪里开始绘制
感谢你能够认真阅读完这篇文章,希望小编分享的“小程序怎么实现实时圆形进度条”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
