正在阅读：怎么在微信小程序中制作实时圆形进度条？怎么在微信小程序中制作实时圆形进度条？

　　小编今天给大家带来的是如何在中制作实时圆形进度条?下面就和小编一起来学习一下吧，希望能够帮助到大家。

　　效果图!

　　初始状态

　　点击中间按钮开始绘制

　　绘制过程

　　绘制结束

　　实现思路

　　建立两个canvas标签，先绘制底层的浅灰色圆圈背景，再绘制上层的红色进度条。

　　WXML代码

　　<viewclass="wrap">

　　<viewclass="circle-box">

　　<canvasclass="circle"style="width:200px;height:200px;"canvas-id="canvasArcCir">

　　</canvas>

　　<canvasclass="circle"style="z-index:-5;width:200px;height:200px;"canvas-id="canvasCircle">

　　</canvas>

　　<viewclass="draw_btn"bindtap="drawCircle">开始动态绘制</view>

　　</view>

　　</view>

　　WXSS代码

　　特别注意：底层的canvas最好使用

　　z-index:-5；放置于底层

　　page{

　　width:100%;

　　height:100%;

　　background-color:#fff;

　　}

　　.circle-box{

　　text-align:center;

　　margin-top:10vw;

　　}

　　.circle{

　　position:absolute;

　　left:0;

　　right:0;

　　margin:auto;

　　}

　　.draw_btn{

　　width:35vw;

　　position:absolute;

　　top:33vw;

　　right:0;

　　left:0;

　　margin:auto;

　　border:1px#000solid;

　　border-radius:5vw;

　　}

　　JS代码

　　//获取应用实例

　　varapp=getApp()

　　varinterval;

　　varvarName;

　　varctx=wx.createCanvasContext('canvasArcCir');

　　Page({

　　data:{

　　},

　　drawCircle:function(){

　　clearInterval(varName);

　　functiondrawArc(s,e){

　　ctx.setFillStyle('white');

　　ctx.clearRect(0,0,200,200);

　　ctx.draw();

　　varx=100,y=100,radius=96;

　　ctx.setLineWidth(5);

　　ctx.setStrokeStyle('#d81e06');

　　ctx.setLineCap('round');

　　ctx.beginPath();

　　ctx.arc(x,y,radius,s,e,false);

　　ctx.stroke()

　　ctx.draw()

　　}

　　varstep=1,startAngle=1.5*Math.PI,endAngle=0;

　　varanimation_interval=1000,n=60;

　　varanimation=function(){

　　if(step<=n){

　　endAngle=step*2*Math.PI/n+1.5*Math.PI;

　　drawArc(startAngle,endAngle);

　　step++;

　　}else{

　　clearInterval(varName);

　　}

　　};

　　varName=setInterval(animation,animation_interval);

　　},

　　onReady:function(){

　　//创建并返回绘图上下文context对象。

　　varcxt_arc=wx.createCanvasContext('canvasCircle');

　　cxt_arc.setLineWidth(6);

　　cxt_arc.setStrokeStyle('#eaeaea');

　　cxt_arc.setLineCap('round');

　　cxt_arc.beginPath();

　　cxt_arc.arc(100,100,96,0,2*Math.PI,false);

　　cxt_arc.stroke();

　　cxt_arc.draw();

　　},

　　onLoad:function(options){

　　}

　　})

　　注意的要点

　　1、关于小程序canvas绘制，请观看微信小程序官方文档绘制

　　2、开始绘制的路径可以根据JS代码中的变量startAngle来选择从哪里开始绘制