微信小程序之圆形进度条

（点击上方公众号，可快速关注）

来源：月影

segmentfault.com/a/1190000013219501


需求概要

小程序中使用圆形倒计时，效果图：

微信小程序之圆形进度条

思路

  1. 使用2个canvas 一个是背景圆环，一个是彩色圆环。

  2. 使用setInterval 让彩色圆环逐步绘制。

第一步先写结构

  • 一个盒子包裹2个canvas以及文字盒子；

  • 盒子使用相对定位作为父级，flex布局，设置居中；

  • 一个canvas，使用绝对定位作为背景，canvas-id="canvasProgressbg"

  • 另一个canvas，使用相对定位作为进度条，canvas-id="canvasProgress"

代码如下：



    

  1. // wxml
    2. 

  2.  <view class="container">
    3. 

  3.      <view class='progress_box'>
    4. 

  4.         <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas> 
    5. 

  5.         <canvas class="progress_canvas"   canvas-id="canvasProgress">  </canvas> 
    6. 

  6.         <view class="progress_text">
    7. 

  7.             <view class="progress_dot"></view> 
    8. 

  8.             <text class='progress_info'> {{progress_txt}}</text>
    9. 

  9.         </view>     
    10. 

  10.     </view>
    11. 

  11. </view>
    12. 





    

  1. // wxss
    2. 

  2. .progress_box{
    3. 

  3.   position: relative;
    4. 

  4.   width:220px;
    5. 

  5.   height: 220px;  
    6. 

  6. // 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了
    7. 

  7. // 一开始设置 width:440rpx; height:440rpx; 发现 在360X640分辨率的设备，下绘制的圆环跑盒子外去了
    8. 

  8. // 小程序使用rpx单位适配 ，但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示
    9. 

  9.   display: flex;  
    10. 

  10.   align-items: center;
    11. 

  11.   justify-content: center;
    12. 

  12.   background-color: #eee;
    13. 

  13. }
    14. 

  14. .progress_bg{
    15. 

  15.   position: absolute;
    16. 

  16.     width:220px;
    17. 

  17.   height: 220px; 
    18. 

  18. }
    19. 

  19. .progress_canvas{ 
    20. 

  20.   width:220px;
    21. 

  21.   height: 220px; 
    22. 

  22. } 
    23. 

  23. .progress_text{ 
    24. 

  24.   position: absolute; 
    25. 

  25.   display: flex;  
    26. 

  26.   align-items: center;
    27. 

  27.   justify-content: center
    28. 

  28. }
    29. 

  29. .progress_info{   
    30. 

  30.   font-size: 36rpx;
    31. 

  31.   padding-left: 16rpx;
    32. 

  32.   letter-spacing: 2rpx
    33. 

  33. } 
    34. 

  34. .progress_dot{
    35. 

  35.   width:16rpx;
    36. 

  36.   height: 16rpx;  
    37. 

  37.   border-radius: 50%;
    38. 

  38.   background-color: #fb9126;
    39. 

  39. }
    40. 



第二步数据绑定


从wxml中可以看到我们使用了一个数据progress_txt，所以在js中设置data如下：




    

  1.  data: {
    2. 

  2.     progress_txt: '正在匹配中...',  
    3. 

  3.   },
    4. 



第三步canvas绘制


敲黑板，划重点。


1.先绘制背景


    

  1. 在js中封装一个画圆环的函数drawProgressbg，canvas 画圆
    2. 

  2. 在onReady中执行这个函数；
    3. 



小程序canvas组件与H5的canvas有点差别，请查看文档，代码如下：




    

  1. drawProgressbg: function(){
    2. 

  2.     // 使用 wx.createContext 获取绘图上下文 context
    3. 

  3.     var ctx = wx.createCanvasContext('canvasProgressbg')
    4. 

  4.     ctx.setLineWidth(4);// 设置圆环的宽度
    5. 

  5.     ctx.setStrokeStyle('#20183b'); // 设置圆环的颜色
    6. 

  6.     ctx.setLineCap('round') // 设置圆环端点的形状
    7. 

  7.     ctx.beginPath();//开始一个新的路径
    8. 

  8.     ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
    9. 

  9.     //设置一个原点(100,100)，半径为90的圆的路径到当前路径
    10. 

  10.     ctx.stroke();//对当前路径进行描边
    11. 

  11.     ctx.draw();
    12. 

  12.   },
    13. 

  13.  onReady: function () {
    14. 

  14.     this.drawProgressbg(); 
    15. 

  15.   },
    16. 



看一下效果如下：


微信小程序之圆形进度条


2.绘制彩色圆环


    

  1. 在js中封装一个画圆环的函数drawCircle，
    2. 

  2. 在onReady中执行这个函数；
    3. 



代码如下：




    

  1.   drawCircle: function (step){  
    2. 

  2.     var context = wx.createCanvasContext('canvasProgress');
    3. 

  3.       // 设置渐变
    4. 

  4.       var gradient = context.createLinearGradient(200, 100, 100, 200);
    5. 

  5.       gradient.addColorStop("0", "#2661DD");
    6. 

  6.       gradient.addColorStop("0.5", "#40ED94");
    7. 

  7.       gradient.addColorStop("1.0", "#5956CC");
    8. 

    9. 

  9.       context.setLineWidth(10);
    10. 

  10.       context.setStrokeStyle(gradient);
    11. 

  11.       context.setLineCap('round')
    12. 

  12.       context.beginPath(); 
    13. 

  13.       // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    14. 

  14.       context.arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
    15. 

  15.       context.stroke(); 
    16. 

  16.       context.draw() 
    17. 

  17.   },
    18. 

  18.  onReady: function () {
    19. 

  19.      this.drawProgressbg(); 
    20. 

  20.      this.drawCircle(2) 
    21. 

  21.   },
    22. 



效果：


微信小程序之圆形进度条





3.设置一个定时器





    

  1. 在js中的data设置一个计数器 count,一个步骤step,一个定时器
    2. 

  2. 在js中封装一个定时器的函数countInterval，
    3. 

  3. 在onReady中执行这个函数；
    4. 



代码如下：




    

  1.   data: {
    2. 

  2.     progress_txt: '正在匹配中...',  
    3. 

  3.     count:0, // 设置 计数器 初始为0
    4. 

  4.     countTimer: null // 设置 定时器 初始为null
    5. 

  5.   },
    6. 

  6.     countInterval: function () {
    7. 

  7.     // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
    8. 

  8.     this.countTimer = setInterval(() => {
    9. 

  9.       if (this.data.count <= 60) {
    10. 

  10.         /* 绘制彩色圆环进度条  
    11. 

  11.         注意此处 传参 step 取值范围是0到2，
    12. 

  12.         所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
    13. 

  13.         */
    14. 

  14.          this.drawCircle(this.data.count / (60/2))
    15. 

  15.         this.data.count++;
    16. 

  16.       } else {
    17. 

  17.         this.setData({
    18. 

  18.           progress_txt: "匹配成功"
    19. 

  19.         }); 
    20. 

  20.         clearInterval(this.countTimer);
    21. 

  21.       }
    22. 

  22.     }, 100)
    23. 

  23.   },
    24. 

  24.  onReady: function () {
    25. 

  25.     this.drawProgressbg();
    26. 

  26.     // this.drawCircle(2) 
    27. 

  27.     this.countInterval()
    28. 

  28.   },
    29. 



最终效果


微信小程序之圆形进度条








【关于投稿】





如果大家有原创好文投稿，请直接给公号发送留言。





① 留言格式：
【投稿】+《 文章标题》+ 文章链接

② 示例：
【投稿】《不要自称是程序员，我十多年的 IT 职场总结》：http://blog.jobbole.com/94148/

③ 最后请附上您的个人简介哈~










觉得本文对你有帮助？请分享给更多人


关注「前端大全」，提升前端技能


微信小程序之圆形进度条


微信小程序之圆形进度条


 
                    
            
                

                  
 
        

	 
        

            

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                            

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                        

   
 



    
相关资源 

        
    
              
                            

   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode