微信小程序实现圆形进度条方法介绍

发布日期： 2017-09-12 阅读量： 作者： 网络

前言

最近工作中为了做一个录制按钮，研究了下小程序的实时圆形进度条实现，下面这篇文章就来给大家详细的介绍了实现的方法示例，废话不多说，先来看看效果图吧。

效果图如下

初始状态

点击中间按钮开始绘制

绘制过程

绘制结束

实现思路

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

WXML代码

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

随便看看