微信小程序：环形进度条模块

利用canvas实现微信小程序环形进度条模块。

模块下载链接：下载链接 最近开发一款背单词的微信小程序，计划使用环形进度条展示每日背单词进度。

效果图如下（可渐变颜色）：

开发步骤

1、在根目录创建名为components的文件夹，用来放需要引用的自定义组件。
2、创建名为circle的文件夹，用来放环形进度条自定义组件。
3、代码拷贝到对应目录下即可正常使用

目录结构图：

使用组件

index.json

{
  "navigationBarTitleText": "测试页面",
  "usingComponents": {
    "circle": "/components/circle/circle"
  }
}

index.wxml

<view class="circle-ps">
      <circle type="2d" id="can" canvasWidth="{{80}}" value="{{per}}" valueColor="#333" lineWidth="{{3}}"></circle>
</view>
<view class="circle-ps">
      <circle type="2d" name="cans1" canvasWidth="{{90}}" value="{{per1}}" valueColor="#333" lineWidth="{{3}}"></circle>
</view>

index.js

setInterval(() => {
      this.setData({
        per:parseInt(Math.random()*100),
        per1:parseInt(Math.random()*100),
      })
     }, 1000);