本文实例为大家分享了微信小程序实现环形进度条的具体代码，供大家参考，具体内容如下
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({
/**
* 页面的初始数据
*/
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);
},
})
效果
