微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條
更新時間:2022年06月30日 08:46:51 作者:逃離到火星
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)環(huán)形進(jìn)度條的具體代碼,供大家參考,具體內(nèi)容如下
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: "答題結(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)動的白點 ? ? ? 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); //設(shè)置一個原點(106,106),半徑為100的圓的路徑到當(dāng)前路徑 ? ? ? cxt_arc.stroke(); //對當(dāng)前路徑進(jìn)行描邊 ? ? ?? ? ? ?? ? ? ? //畫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); ? ? ?? ? ? ? //設(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)動白點 ? ? ? 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); ? }, })
效果
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容
這篇文章主要介紹了如何使用js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容,需要的朋友可以參考下
2014-04-04 
JavaScript數(shù)據(jù)類型和變量_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)類型和變量的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
2017-06-06 
微信小程序如何修改radio和checkbox的默認(rèn)樣式和圖標(biāo)
這篇文章主要介紹了微信小程序修改radio和checkbox的默認(rèn)樣式和圖標(biāo),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07