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

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

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

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

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

解决方案

第一步先写结构

一个盒子包裹2个canvas以及文字盒子；

盒子使用相对定位作为父级，flex布局，设置居中；

一个canvas，使用绝对定位作为背景，canvas-id="canvasProgressbg"

另一个canvas，使用相对定位作为进度条，canvas-id="canvasProgress"

代码如下：// wxml

{ {progress_txt}}

// wxss

.progress_box{

position: relative;

width:220px;

height: 220px;

// 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了

// 一开始设置 width:440rpx; height:440rpx; 发现 在360X640分辨率的设备，下绘制的圆环跑盒子外去了

// 小程序使用rpx单位适配 ，但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示

display: flex;

align-items: center;

justif