wxml：

view class="progress"        canvas canvas-id="canvasProgress" style="width: {{canvasWidth}}rpx; height: {{canvasHeitht}}rpx;"/canvas      /view      view class="progress"        canvas canvas-id="canvasProgressReal" style="width: {{canvasWidth}}rpx; height: {{canvasHeitht}}rpx;"/canvas      /view

js：

Page({  /**   * 页面的初始数据   */  data: {    canvasWidth: 500,    canvasHeitht: 300,    radioPos: 98,    footNum: 0,    footNumAll: 6000,    myTargetFoot: 10000,    degree: 195,    timer: '',    timerNum: '',  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {    var that = this;    let widthPX = wx.getSystemInfoSync().windowWidth;    let r = this.data.radioPos = widthPX * (500 / 750) * (300 / 365) * (2 / 4)    var context = wx.createCanvasContext('canvasProgress')    context.translate(24, 6);    context.setStrokeStyle("#fff");    context.setLineWidth(2);    context.beginPath();    for (let i = 195; i = -15; i--) { //每1度绘制一条线      let degree = i / 360 * Math.PI * 2      let radio = r * 0.92 - r * 0.005 * (210 - i) / 240      context.moveTo(r + radio * Math.cos(degree), r - radio * Math.sin(degree)); //向量加减      context.lineTo(r + r * Math.cos(degree), r - r * Math.sin(degree)); //向量加减      context.stroke();    }    context.draw();  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function() {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function() {    let that = this    //清理    var context = wx.createCanvasContext('canvasProgressReal')    context.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeitht)    context.draw({      reserve: true    })    that.walkAction()  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function() {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function() {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function() {  },  walkAction: function() {    console.log('walk')    this.setData({      degree: 195    })    let that = this    let r = this.data.radioPos    let widthPX = wx.getSystemInfoSync().windowWidth;    var context = wx.createCanvasContext('canvasProgressReal')    context.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeitht)    context.setStrokeStyle("#FDD08F");    context.translate(24, 6);    context.setLineWidth(2);    let degreeMax = 195 - (this.data.footNumAll / this.data.myTargetFoot) * 240;    if (Number.parseInt(this.data.footNumAll) = Number.parseInt(this.data.myTargetFoot)) {      console.log('footNumAll is smaller than myTargetFoot')      degreeMax = -33    }    this.timer = setInterval(() = {      if (that.data.degree  degreeMax) {        context.beginPath();        let degreeOne = that.data.degree / 360 * Math.PI * 2        let radio = r * 0.92 - r * 0.005 * (195 - that.data.degree) / 240        context.moveTo(r + radio * Math.cos(degreeOne), r - radio * Math.sin(degreeOne));        context.lineTo(r + r * Math.cos(degreeOne), r - r * Math.sin(degreeOne));        context.stroke();        // context.draw({        //   reserve: true        // })//这个方法真机上绘制有问题        wx.drawCanvas({          canvasId: 'canvasProgressReal',          actions: context.getActions(),          reserve: true        })        // that.data.degree -= 3;        that.data.degree--;      } else {        clearInterval(that.timer)      }      // }, 50)    }, 10)    let tempTimes = 0;    let times = (this.data.footNumAll / this.data.myTargetFoot) * 240 / 3;    if (Number.parseInt(this.data.footNumAll) = Number.parseInt(this.data.myTargetFoot)) {      times = 80    }    let step = this.data.footNumAll / times    this.timerNum = setInterval(() = {      if (tempTimes  times) {        that.setData({          footNum: Math.floor(that.data.footNum + step)        })        tempTimes += 1;      } else {        that.setData({          footNum: that.data.footNumAll        })        clearInterval(that.timerNum)      }      // }, 50)    }, 10)  },})

wxss：

.progress {  z-index: 1;  width: 100%;  height: 100%;  position: absolute;  left: 0;  top: 0;  display: flex !important;  align-items: center;  justify-content: center;}.progress canvas {  width: 100%;  height: 100%;}