微信小程序之圆形进度条

来源：月影

segmentfault.com/a/1190000013219501

需求概要

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

思路

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

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

第一步先写结构

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

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

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

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

代码如下：

第二步数据绑定

从wxml中可以看到我们使用了一个数据progress_txt，所以在js中设置data如下：

第三步canvas绘制

敲黑板，划重点。

1.先绘制背景

在js中封装一个画圆环的函数drawProgressbg，canvas 画圆

在onReady中执行这个函数；

小程序canvas组件与H5的canvas有点差别，请查看文档，代码如下：

看一下效果如下：

2.绘制彩色圆环

在js中封装一个画圆环的函数drawCircle，

在onReady中执行这个函数；

代码如下：

效果：

3.设置一个定时器

在js中的data设置一个计数器 count,一个步骤step,一个定时器

在js中封装一个定时器的函数countInterval，

在onReady中执行这个函数；

代码如下：

最终效果

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能