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

 效果如图

 

  <view class='circleBar'>
            <view class="wrap">
              <canvas class="cir" class="cancas_wh" canvas-id="canvasArc2"></canvas>
              <view class="centerWord">20%</view>
            </view>
   </view>

data = {
 cxt_xx: 47,//圆的x,y坐标
 cxt_rr: 41,//圆半径
}

 

 showScoreAnimation1(copyRightItems) {
    /*
   cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
   x                        Number      圆的x坐标
   y                        Number      圆的y坐标
   r                        Number      圆的半径
   sAngle                Number      起始弧度，单位弧度（在3点钟方向）
   eAngle                Number      终止弧度
   counterclockwise        Boolean      可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
   */
    let that = this
    // 页面渲染完成
    // 这部分是灰色底层
    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(this.cxt_xx, this.cxt_xx, this.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() //开始一个新的路径
    cxt_arc.arc(
      this.cxt_xx,
      this.cxt_xx,
      this.cxt_rr,
      (-Math.PI * 1) / 2,
      2 * Math.PI * (copyRightItems / 100) - (Math.PI * 1) / 2,
      false
    )
    cxt_arc.stroke() //对当前路径进行描边
    cxt_arc.draw()
  }

 

//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() {   
var copyRightItems1=20 //设置百分比20
this.showScoreAnimation1(copyRightItems1)
}