微信小程序利用canvas绘制一个动画百分比圆圈

效果图（动态的圆圈）

 

<template>     
 <view class='circleBar'>
            <view class="wrap">
              <view class="top">
                <canvas class="cir" class="cancas_wh" canvas-id="canvasArc1"></canvas>
                <view class="centerWord">100%</view>
              </view>
            </view>
          </view>
</template>

 js部分

  data = { 
 cxt_xx: 47,
    cxt_rr: 41,
    timer: 0,
}

  showScoreAnimation1(maxNum) {
    let that = this
    let copyRightItems = 0
    that.timer = setInterval(function() {
      copyRightItems++
      if (copyRightItems == maxNum) {
        clearInterval(that.timer)
      } else {
        // 页面渲染完成
        // 这部分是灰色底层
        let cxt_arc = wx.createCanvasContext('canvasArc1') //创建并返回绘图上下文context对象。
        cxt_arc.setLineWidth(6) //绘线的宽度
        cxt_arc.setStrokeStyle('#cccccc') //绘线的颜色
        cxt_arc.setLineCap('round') //线条端点样式
        cxt_arc.beginPath() //开始一个新的路径
        cxt_arc.arc(
          that.cxt_xx,
          that.cxt_xx,
          that.cxt_rr,
          0,
          2 * Math.PI,
          false
        ) //设置一个原点(53,53)，半径为50的圆的路径到当前路径
        cxt_arc.stroke() //对当前路径进行描边
        //这部分是绿色部分
        cxt_arc.setLineWidth(6)
        cxt_arc.setStrokeStyle('#509234')
        cxt_arc.setLineCap('round')
        cxt_arc.beginPath() //开始一个新的路径
        console.log(copyRightItems, 'copyRightItems')
        cxt_arc.arc(
          that.cxt_xx,
          that.cxt_xx,
          that.cxt_rr,
          (-Math.PI * 1) / 2,
          2 * Math.PI * (copyRightItems / 100) - (Math.PI * 1) / 2,
          false
        )
        cxt_arc.stroke() //对当前路径进行描边
        cxt_arc.draw()
      }
    }, 20)
    that.$apply()
  }

css部分

.circleBar {
  width: 185rpx;
  height: auto;
  overflow: hidden;
  position: relative;
}
.cancas_wh {
  width: 212rpx;
  height: 212rpx;
}
.cir {
  display: inline-block;
  background-color: #fff;
  border-radius: 100%;
}
.centerWord {
  width: 100%;
  position: absolute;
  top: 70rpx;
  left: 5rpx;
  text-align: center;
  color: #509234;
}

使用

  onLoad() {  
    let totalItems = 100//最终加载到100%位置，可以任意修改
  this.showScoreAnimation1(totalItems)
}

效果图