微信小程序实现圆形进度条实例分享

微信小程序实现圆形进度条实例分享
本文主要和大家分享微信小程序实现圆形进度条实例，希望能帮助到大家。

本文主要和大家分享微信小程序实现圆形进度条实例，希望能帮助到大家。

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

思路

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

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

解决方案第一步先写结构

一个盒子包裹2个canvas以及文字盒子；盒子使用相对定位作为父级，flex布局，设置居中；一个canvas，使用绝对定位作为背景，canvas-id="canvasProgressbg"另一个canvas，使用相对定位作为进度条，canvas-id="canvasProgress"代码如下：

// wxml <view>     <view>        <canvas>  </canvas>         <canvas>  </canvas>         <view>            <view></view>             <text> {{progress_txt}}</text>        </view>         </view></view>