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

微信小程序实现圆形进度条方法介绍,代码,底层,程序,按钮,进度条

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

易采站长站，站长之家为您整理了微信小程序实现圆形进度条方法介绍的相关内容。

前言

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

效果图如下

初始状态

点击中间按钮开始绘制

绘制过程

绘制结束

实现思路

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

WXML代码<view class="wrap"> <view class="circle-box"> <canvas class="circle" style="width:200px; height:200px;" canvas-id="canvasArcCir"> </canvas> <canvas class="circle" style="z-index: -5; width:200px; height:200px;" canvas-id="canvasCircle"> </canvas&g