效果图（动态的圆圈）
<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 = thislet copyRightItems = 0that.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)}
效果图
