FWQ
微信小程序实现实时圆形进度条的方法
这篇文章主要给大家介绍了利用微信小程序实现实时圆形进度条的方法,文中给出了详细的示例代码,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。 前言 最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧。 效果图如下 初始状态 点击中间按钮开始绘制 绘制过程 绘制结束 实现思路 建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。 WXML代码 <view> <view> <canvas> </canvas> <canvas> </canvas> <view>开始动态绘制</view> </view></view> 登录后复制 WXSS代码 特别注意:底层的canvas最好使用 z-index:-5;放置于底层 page { width: 100%; height: 100%; background-color: #fff; }…