小程序开发之实时圆形进度条详解

发布日期： 2018-05-18 阅读量： 作者： 网络

最近为了做一个录制按钮，研究了下小程序的实时圆形进度条实现

废话不多说，先上一张效果图！

小程序开发之实时圆形进度条详解

初始状态

小程序开发之实时圆形进度条详解

点击中间按钮开始绘制

小程序开发之实时圆形进度条详解

绘制过程

小程序开发之实时圆形进度条详解

绘制结束

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

<view>
  <view>
    <canvas>
    </canvas>
    <canvas>
    </canvas>
    <view>开始动态绘制</view>
  </view></view>