小编今天给大家带来的是如何在中制作实时圆形进度条?下面就和小编一起来学习一下吧,希望能够帮助到大家。 效果图! 初始状态 点击中间按钮开始绘制 绘制过程 绘制结束 实现思路 建立两个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来选择从哪里开始绘制
|