微信小程序實現(xiàn)環(huán)形進度條

更新時間：2022年06月30日 08:46:51 作者：逃離到火星

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)環(huán)形進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)環(huán)形進度條的具體代碼，供大家參考，具體內容如下

index.wxss

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

index.wxml

<canvas class="circle" style="z-index: 1;" canvas-id="canvasArcCir"></canvas>
<canvas class="circle" style="z-index: 0;" canvas-id="canvasCircle"></canvas>

index.js

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


Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? pitch: 0,
? ? titleName: "答題結果",
? ? 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";
? ? }

? ? //練習結果-差
? ? 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();
? ? ??
? ? ??
? ? ? //沒有運動的白點
? ? ? 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(); //開始一個新的路徑
? ? ? cxt_arc.arc(130, 130, 60, 2.5, 2.2 * Math.PI, false); //設置一個原點(106,106)，半徑為100的圓的路徑到當前路徑
? ? ? cxt_arc.stroke(); //對當前路徑進行描邊
? ? ??
? ? ??
? ? ? //畫50條放射白線實現(xiàn)虛線效果
? ? ? 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;
? ? ? }
? ? ??
? ? ? //中間字 數(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) {
? ? ? //運動環(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()
? ? ??
? ? ? //運動白點
? ? ? 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);
? },

})

效果