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

利用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);