微信canvas画一个进度条刻度扇形

最新推荐文章于 2024-06-12 20:30:00 发布

转载最新推荐文章于 2024-06-12 20:30:00 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_20686495/article/details/82892313

本文介绍了一种使用微信小程序的canvas组件绘制步数进度扇形的方法。通过双canvas实现，一个用于背景线条，另一个实时更新步数进度。文章详细展示了如何根据步数比例动态调整扇形角度，实现进度显示效果。

在这里插入图片描述

图中的扇形总共需要用到两个canvas

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>

wxss：


.progress {
  position:absolute;
  z-index: 1;
}

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasWidth: 500,
    canvasHeitht: 300,
    radioPos: 98,
    footNum: 0,
    footNumAll: 6000,
    myTargetFoot: 10000,
    degree: 210,
    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 = 210; i >= -30; i -= 3) { //每3度绘制一条线
      let degree = i / 360 * Math.PI * 2
      let radio = r * 0.87 - r * 0.05 * (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: 210
    })
    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 = 210- (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.87 - r * 0.05 * (210 - 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;
      } 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)
  },
})