【微信小程序】圆环进度条

一、需求分析

① 生成用于倒计时的圆环，通过代码来控制圆环的倒计时进度。要做到重新进页面，圆环不会重新归零。
② 圆环中间会有倒计时
③ 倒计时的时间可以自定义

二、实现效果

三、实现过程

index.wxml 部分，使用 canvas 绘制两个圆环。以及显示中间的倒计时

   
    <view class="loading-warp">
      <canvas class="canvas" canvas-id="canvasCircle"></canvas>
      <canvas class="canvas-mask" canvas-id="canvasRing"></canvas>
      <view class="rate" wx:if="{{tem==1}}">{{hours}}时{{minute}}分</view>
      <view class="rate" wx:if="{{tem==0}}">{{minute}}分{{second}}秒</view>
      <view class="rate" wx:if="{{tem==-1}}">0分0秒</view>
    </view>
    

index.js 里，先绘制白色圆环

    let cxt = wx.createCanvasContext('canvasCircle');
    cxt.setLineWidth(3);
    cxt.setStrokeStyle('#ffffff'); //白色圆环
    cxt.setLineCap('round');
    cxt.beginPath();
    cxt.arc(30, 30, 28, 0, 2 * Math.PI, false);
    cxt.stroke();
    cxt.draw();

再计算出总时间、已经使用多久时间和还剩的时间。开始时间和结束时间可以自定义的

    let nowTime = new Date();//当前时间
    let startTime = "2022-11-13 11:00:00"; // 开始时间
    let endTime = "2022-11-13 12:00:00"; // 结束时间

    let ntime = nowTime.getTime(); //当前时间戳
    let stime = new Date(startTime).getTime(); //开始时间戳
    let etime = new Date(endTime).getTime(); //结束时间戳


    let allTime = (etime - stime) / 1000; // 总时间
    let alreadyTime = (ntime - stime) / 1000; // 查询已经使用多久时间
    let noUsedTime = (etime - ntime) / 1000; // 还剩的时间

计算出圆环进度条的开始位置和结束位置，以及圆环中间的时间

        timer: setInterval(function () {

          let lastEnd = alreadyTime * 2 * Math.PI / allTime; //已经走的周长

          // 已经走的 = 一直按照初始速度走的周长 + 初始位置 + 已经走过的周长
          endAngle = steps * 2 * Math.PI / allTime + startAngle + lastEnd;

          drawing(startAngle, endAngle);
          steps++;

          // 天数位
          let day = Math.floor(noUsedTime / 3600 / 24);
          let dayStr = day.toString();
          if (dayStr.length == 1) dayStr = '0' + dayStr;

          // 小时位
          let hr = Math.floor((noUsedTime - day * 3600 * 24) / 3600);
          let hrStr = hr.toString();
          if (hrStr.length == 1) hrStr = '0' + hrStr;

          // 分钟位
          let min = Math.floor((noUsedTime - day * 3600 * 24 - hr * 3600) / 60);
          let minStr = min.toString();
          if (minStr.length == 1) minStr = '0' + minStr;

          // 秒位
          let sec = noUsedTime - day * 3600 * 24 - hr * 3600 - min * 60;
          let secStr = sec.toString();
          if (secStr.length == 1) secStr = '0' + secStr;

          that.setData({
            hours: hrStr,
            minute: minStr,
            second: parseInt(secStr),
          });

          noUsedTime--;

          if (noUsedTime < 3600) { //显示分秒
            that.setData({
              tem: 0
            })
          } else if (noUsedTime >= 3600) {
            that.setData({ //显示时分
              tem: 1
            })
          }

        }, 1000)

绘制圆环倒计时

    // 绘制
    function drawing(s, e) {
      let context = wx.createCanvasContext('canvasRing');
      context.setLineWidth(3);
      context.setStrokeStyle('#FF0000'); //红色
      context.setLineCap('round');
      context.beginPath();
      context.arc(30, 30, 28, s, e, false); //s起始角 e结束位置，通过改变 steps 值确定
      context.stroke();
      context.draw();
    }

四、完整代码

csdn 上的地址：点击这里