您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“微信小程序怎么实现环形进度条”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序怎么实现环形进度条”吧!
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); }, })
效果
到此,相信大家对“微信小程序怎么实现环形进度条”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。