小程序进度条_小程序杂技谈之环形进度条

环形进

度条

秋季出行

老规矩，效果展示：

看效果，我们决定用小程序的canvas2d进行绘画

小程序官方推荐使用canvas2d并且在onReady进行使用

先看布局

      {{c_val}}

      {{tv_name}}

    增加

    减少

代码逻辑

然后我们在.js文件中编写代码逻辑

初始化数据

var startDegree = 210; //从什么角度开始

var maxValue = 100; //最大值

var minValue = 0; //最小值

var lineWidth = 6; //线条宽度

var circle_r;

var ctx ;

var canvas;

let winWidth;

/**

   * 页面的初始数据

   */

  data: {

    time: ''

  },

在onReady中进行初始化绑定

 /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

    this.setData({

      c_val: 0,

      tv_name: "展示分数"

    })

    const query = wx.createSelectorQuery()

    query.select('#canvasring')

      .fields({

        node: true,

        size: true

      })

      .exec((res) => {

        canvas = res[0].node

        ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio

        canvas.width = res[0].width * dpr

        canvas.height = res[0].height * dpr

        ctx.scale(dpr, dpr)

        winWidth = wx.getSystemInfoSync().windowWidth;

        circle_r = winWidth / 750 * 300 / 2; //画布的一半，用来找中心点和半径

        //定义起始点

        ctx.translate(circle_r, circle_r);

        // var value = this.data.c_val; //当前的值

        // var lineColor = "#393"; //线条颜色

        var percent = 300 * ((this.data.c_val - minValue) / (maxValue - minValue)); //计算结果

        this.showCircle(ctx,circle_r,startDegree,lineWidth,percent)

      })

  },

showCircle(ctx,circle_r,startDegree,lineWidth,percent) {

    var linearGradient;

    ctx.clearRect(-circle_r, -circle_r, canvas.width, canvas.height)

    //灰色圆弧

    ctx.beginPath();

    ctx.strokeStyle = "#ebebeb"

    ctx.lineCap = 'round'

    ctx.lineWidth = lineWidth

    ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI,

      300 * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);

    ctx.stroke();

    ctx.closePath();

    //有色彩的圆弧

    ctx.beginPath();

    linearGradient = ctx.createLinearGradient(

      -Math.sin((30) * Math.PI / 180) * (circle_r - 10),

      Math.cos((30) * Math.PI / 180) * (circle_r - 10),

      -Math.sin((percent + 30) * Math.PI / 180) * (circle_r - 10),

      Math.cos((percent + 30) * Math.PI / 180) * (circle_r - 10),

    );

    linearGradient.addColorStop(0, "#5096F1");

    linearGradient.addColorStop(1, "#1C80F1");

    ctx.strokeStyle = linearGradient

    //ctx.strokeStyle = "#5096F1"

    ctx.lineWidth = 12

    ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI,

      percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);

    ctx.stroke();

    ctx.closePath();

    ctx.beginPath();

    ctx.strokeStyle = "#FFFFFF"

    //ctx.fillStyle = "#FFFFFF"

    ctx.lineWidth = 5

    ctx.arc(

      -Math.sin((percent + 30) * Math.PI / 180) * (circle_r - 10),

      Math.cos((percent + 30) * Math.PI / 180) * (circle_r - 10),

      2, 0, 2 * Math.PI, true);

    //ctx.fill()

    ctx.stroke();

    ctx.closePath();

  },

增加功能

添加增加减少的功能

addNumber: function(){

    clearInterval(this.data.time)

    this.data.time = setInterval(()=>{

      if(this.data.c_val 

        this.setData({

          c_val: this.data.c_val+1

        })

        var percent = 300 * ((this.data.c_val - minValue) / (maxValue - minValue)); //计算结果

        this.showCircle(ctx,circle_r,startDegree,lineWidth,percent)

      }else{

        clearInterval(this.data.time)

      }

    },50)

  },

  cutNumber: function(){

    clearInterval(this.data.time)

    this.data.time = setInterval(()=>{

      if(this.data.c_val > 0){

        this.setData({

          c_val: this.data.c_val - 1

        })

        var percent = 300 * ((this.data.c_val - minValue) / (maxValue - minValue)); //计算结果

        this.showCircle(ctx,circle_r,startDegree,lineWidth,percent)

      }else{

        clearInterval(this.data.time)

      }

    },50)

  },