微信小程序需求概述小程序中使用了圆形倒计时，效果图：idea使用了2张画布，一张是背景环，一张是色环。使用setInterval以递增方式绘制彩色圆圈。解决方案的第一步是编写结构。一个盒子包裹着2个画布和一个文本框；盒子使用相对定位作为parent，flex布局，设置居中；一个canvas使用绝对定位作为背景，canvas-id="canvasProgressbg"，另一个Canvas，使用相对定位作为进度条，canvas-id="canvasProgress"代码如下：//wxml<查看类="progress_text">{{progress_txt}}//wxss.progress_box{位置：相对；宽度：220px；高度：220px；//这里的宽高是必须大于等于画布环的直径，否则画到框外会看不见//初始设置width:440rpx;高度：440rpx；发现分辨率为360X640的设备，绘制的圆环开箱即用所以只有以px为单位绘制的圆环才能显示在boxdisplay:flex;对齐项目：居中；证明内容：居中；背景色：#eee；}.progress_bg{位置：绝对；宽度：220px；高度：220px；}.progress_canvas{宽度：220px；高度：220px；}.progress_text{位置：绝对；显示：弹性；对齐项目：居中；调整内容：居中}.progress_info{字体大小：36rpx；左：16rpx；字母间距：2rpx}.progress_dot{宽度：16rpx;高度：16rpx；边界半径：50%；background-color:#fb9126;}数据绑定的第二步从wxml中可以看出我们使用了一个数据progress_txt，所以在js中设置数据如下：data:{progress_txt:'Matching...',}，第三步画画布敲黑板，重点1.先画背景，在js中封装一个图片环的函数drawProgressbg，画布画一个圆，在onReady中执行这个函数；小程序canvas组件和H5canvas有点区别，请查看文档，代码如下',this)ctx.setLineWidth(4);//设置圆环的宽度ctx.setStrokeStyle('#20183b');//设置环的颜色ctx.setLineCap('round')//设置环形端点的形状ctx.beginPath();//开始一条新路径ctx.arc(110,110,100,0,2*Math.PI,false);//设置一个原点(110,110)，半径为100的圆的路径到当前路径ctx.stroke();//描边当前路径ctx.draw();},onReady:function(){this.drawProgressbg();},看看效果如下：2.画一个彩色的圆在js中封装一个画圆函数drawCircle，在onReady中执行该函数；drawCircle:function(step){varcontext=wx.createCanvasContext('canvasProgress',this);//设置渐变vargradient=context.createLinearGradient(200,100,100,200);gradient.addColorStop("0","#2661DD");gradient.addColorStop("0.5","#40ED94");渐变.addColorStop("1.0","#5956CC");context.setLineWidth(10);context.setStrokeStyle(渐变);context.setLineCap('round')context.beginPath();//参数step为绘制的圆周长，0到2为一周-Math.PI/2设置起始角度为12点，结束角度由改变step的值决定context.arc(110,110,100,-Math.PI/2,step*Math.PI-Math.PI/2,false);context.stroke();context.draw()},onReady:function(){this.drawProgressbg();this.drawCircle(2)},this.drawCircle(0.5)效果如下：this.drawCircle(1)效果如下：this.drawCircle(2)效果如下：3.设置一个定时器在js中的数据中设置一个计数器计数，一个步长，一个定时器在js中封装一个定时器函数countInterval，在onReady中执行该函数；data:{progress_txt:'Matching...',count:0,//将计数器初始设置为0countTimer:null//将计时器初始设置为null},countInterval:function(){//设置倒计时定时器每100毫秒执行一次，计数器count+1，画一个圆需要6秒this.countTimer=setInterval(()=>{if(this.data.count<=60){/*画一个彩色圆progressbar注意这里的参数step取值范围是0到2，所以计数器60的最大值对应2进行处理，当计数器count=60时step=2*/this.drawCircle(this.data.count/(60/2))this.data.count++;}else{this.setData({progress_txt:"匹配成功"});clearInterval(this.countTimer);}},100)},onReady:function(){this.drawProgressbg();//this.drawCircle(2)this.countInterval()},最终效果微信小程序的循环进度条（自定义组件）因版本库升级（20190716）wx.createCanvasContext(id)更改为:wx.createCanvasContext(id,this);
