微信小程序怎么实现环形进度条

本篇内容主要讲解“微信小程序怎么实现环形进度条”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序怎么实现环形进度条”吧!

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({    data: {    pitch: 0,    titleName: "答题结果",    btn_color: "",    text: 0,    accuracy: {},  },    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";    }    //练习结果-差    this.setData({      bgColor: bgColorTemp,      btBgColor: bgColorTemp,      tColor: bColorTemp,      bdColor: bColorTemp,      accuracy: accuracyTemp    });  },    onReady: function () {    var that = this;    setTimeout(function () {      //创建并返回绘图上下文context对象。      //灰色圆环      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();                  //没有运动的白点      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();                  //虚线中的圆环      var waste_pce = 20;      cxt_arc.setLineWidth(18);      cxt_arc.setStrokeStyle(that.data.tColor);      cxt_arc.setLineCap('square')      cxt_arc.beginPath(); //开始一个新的路径      cxt_arc.arc(130, 130, 60, 2.5, 2.2 * Math.PI, false); //设置一个原点(106,106)，半径为100的圆的路径到当前路径      cxt_arc.stroke(); //对当前路径进行描边                  //画50条放射白线实现虚线效果      cxt_arc.setLineWidth(3);      cxt_arc.setStrokeStyle('#fff');      cxt_arc.setLineCap('square');      cxt_arc.beginPath(); //开始一个新的路径      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);            //设置中间字的坐标      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;      }            //中间字 数字      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);  },    drawCircle: function (name, color) {    this.setData({      btn_color: color,      text: name * 100    })    clearInterval(varName);    function drawArc(s, e, x9, y9) {      //运动环      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()            //运动白点      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;//结束弧度        var L = (1.2*Math.PI + endAngle )*94;//弧长        var x = (54 - 130) * Math.cos(L / 94) - (185 - 130) * Math.sin(L / 94) + 130; //x坐标        var y = (54 - 130) * Math.sin(L / 94) + (185 - 130) * Math.cos(L / 94) + 130; //y坐标        drawArc(startAngle, endAngle, x, y);        step++;      } else {        clearInterval(varName);      }    };    varName = setInterval(animation, animation_interval);  },})

效果

到此，相信大家对“微信小程序怎么实现环形进度条”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！