微信小程序怎么實(shí)現(xiàn)環(huán)形進(jìn)度條

本篇內(nèi)容主要講解“微信小程序怎么實(shí)現(xiàn)環(huán)形進(jìn)度條”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“微信小程序怎么實(shí)現(xiàn)環(huán)形進(jìn)度條”吧!

index.wxss

.circle {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

index.wxml

<canvas class="circle"  canvas-id="canvasArcCir"></canvas>
<canvas class="circle"  canvas-id="canvasCircle"></canvas>

index.js

var interval;
var varName;
var ctx = wx.createCanvasContext('canvasArcCir');


Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    pitch: 0,
    titleName: "答題結(jié)果",
    btn_color: "",
    text: 0,
    accuracy: {},
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    if (options.correctAndError != null) {
      var accuracyTemp = JSON.parse(options.correctAndError);
      accuracyTemp.time = (accuracyTemp.time / 2).toFixed(1);
    } else {
      var accuracyTemp = {
        questionNumber: 10,
        correctNumber: 7,
        time: 50
      }
    }

    var bgColorTemp = "";
    var bColorTemp = "";
    if ((accuracyTemp.correctNumber / accuracyTemp.questionNumber) < 0.6) {
      bgColorTemp = "linear-gradient(180deg,rgba(255,90,84,1) 0%,rgba(255,152,109,1) 100%)";
      bColorTemp = "#FF5C54"
    } else if ((accuracyTemp.correctNumber / accuracyTemp.questionNumber) < 0.8) {
      bgColorTemp = "linear-gradient(180deg,rgba(250,182,25,1) 0%,rgba(249,206,69,1) 100%)";
      bColorTemp = "#FBC932";
    } else {
      bgColorTemp = "linear-gradient(180deg,rgba(53,168,203,1) 0%,rgba(80,205,219,1) 100%)";
      bColorTemp = "#36A9CB";
    }

    //練習(xí)結(jié)果-差
    this.setData({
      bgColor: bgColorTemp,
      btBgColor: bgColorTemp,
      tColor: bColorTemp,
      bdColor: bColorTemp,
      accuracy: accuracyTemp
    });
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    var that = this;
    setTimeout(function () {


      //創(chuàng)建并返回繪圖上下文context對象。
      //灰色圓環(huán)
      var cxt_arc = wx.createCanvasContext('canvasCircle');
      cxt_arc.setLineWidth(15);
      cxt_arc.setStrokeStyle('#eaeaea');
      cxt_arc.setLineCap('round');
      cxt_arc.beginPath();
      cxt_arc.arc(130, 130, 94, 2.5, 2.2 * Math.PI, false);
      cxt_arc.stroke();
      
      
      //沒有運(yùn)動的白點(diǎn)
      cxt_arc.beginPath();
      cxt_arc.setStrokeStyle('#fff');
      cxt_arc.setLineCap('round');
      cxt_arc.setLineWidth(5);
      cxt_arc.arc(55, 185, 1, 0, 2 * Math.PI, false);
      cxt_arc.stroke();
      
      
      //虛線中的圓環(huán)
      var waste_pce = 20;
      cxt_arc.setLineWidth(18);
      cxt_arc.setStrokeStyle(that.data.tColor);
      cxt_arc.setLineCap('square')
      cxt_arc.beginPath(); //開始一個(gè)新的路徑
      cxt_arc.arc(130, 130, 60, 2.5, 2.2 * Math.PI, false); //設(shè)置一個(gè)原點(diǎn)(106,106)，半徑為100的圓的路徑到當(dāng)前路徑
      cxt_arc.stroke(); //對當(dāng)前路徑進(jìn)行描邊
      
      
      //畫50條放射白線實(shí)現(xiàn)虛線效果
      cxt_arc.setLineWidth(3);
      cxt_arc.setStrokeStyle('#fff');
      cxt_arc.setLineCap('square');
      cxt_arc.beginPath(); //開始一個(gè)新的路徑
      for (var i = 0; i < 50; i++) {
        var x = Math.PI * 2 / 50 * i;
        cxt_arc.moveTo(130, 130);
        cxt_arc.lineTo((130 + Math.sin(x) * 70), (130 + Math.cos(x) * 70));
        cxt_arc.stroke();
      }

      var accuracyTemp = (that.data.accuracy.correctNumber / that.data.accuracy.questionNumber)

      that.drawCircle(accuracyTemp, that.data.tColor);
      
      //設(shè)置中間字的坐標(biāo)
      var x = 130,
        y = 130;
      if (accuracyTemp == 1) {
        x = 125;
        y = 158;
      } else if (accuracyTemp == 0) {
        x = 126;
        y = 140;
      } else {
        x = 126;
        y = 150;
      }
      
      //中間字 數(shù)字
      cxt_arc.beginPath();
      cxt_arc.setFontSize(30);
      cxt_arc.setFillStyle(that.data.tColor);
      cxt_arc.textAlign = 'center';
      cxt_arc.fillText(accuracyTemp * 100, x, 135);
      cxt_arc.stroke();
      
      //中間字 %
      cxt_arc.beginPath();
      cxt_arc.setFontSize(10);
      cxt_arc.fillText("%", y, 135);
      cxt_arc.textAlign = 'center';
      cxt_arc.stroke();
      
      //中間字 正確率
      cxt_arc.beginPath();
      cxt_arc.setFontSize(10);
      cxt_arc.setFillStyle("#999999");
      cxt_arc.textAlign = 'center';
      cxt_arc.fillText("正確率", 130, 155);
      cxt_arc.stroke();

      cxt_arc.draw();


    }, 500);
  },
  /**
   * 自定義函數(shù)
   */
  drawCircle: function (name, color) {
    this.setData({
      btn_color: color,
      text: name * 100
    })
    clearInterval(varName);

    function drawArc(s, e, x9, y9) {
      //運(yùn)動環(huán)
      ctx.setFillStyle('white');
      ctx.clearRect(0, 0, 200, 200);
      ctx.draw();
      var x = 130,
        y = 130,
        radius = 94;
      ctx.setLineWidth(15);
      ctx.setStrokeStyle(color);
      ctx.setLineCap('round');
      ctx.beginPath();
      ctx.arc(x, y, radius, s, e, false);
      ctx.stroke()
      
      //運(yùn)動白點(diǎn)
      ctx.beginPath();
      ctx.setStrokeStyle('#fff');
      ctx.setLineCap('round');
      ctx.setLineWidth(5);
      ctx.arc(x9, y9, 1, 0, 2 * Math.PI, false);
      ctx.stroke();
      ctx.draw()


    }
    var step = 0,
      startAngle = 0.8 * Math.PI,//開始弧度
      endAngle = 0;
    var animation_interval = 0,
      n = 600;


    var animation = function () {
      if (step <= n) {

        endAngle = name * (step * 1.4 * Math.PI / n) + 0.8 * Math.PI;//結(jié)束弧度
        var L = (1.2*Math.PI + endAngle )*94;//弧長
        var x = (54 - 130) * Math.cos(L / 94) - (185 - 130) * Math.sin(L / 94) + 130; //x坐標(biāo)
        var y = (54 - 130) * Math.sin(L / 94) + (185 - 130) * Math.cos(L / 94) + 130; //y坐標(biāo)

        drawArc(startAngle, endAngle, x, y);
        step++;
      } else {
        clearInterval(varName);
      }
    };
    varName = setInterval(animation, animation_interval);
  },

})

效果

到此，相信大家對“微信小程序怎么實(shí)現(xiàn)環(huán)形進(jìn)度條”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！