/a/19501
需求概要
小程序中使用圓形倒計時，效果圖：
思路
使用2個 一個是背景圓環，一個是彩色圓環。 使用 讓彩色圓環逐步繪制。 第一步先寫結構
代碼如下：
// wxml {{}} // wxss .{ : ; width:220px; : 220px; // 這里的寬高是必須大于等于圓環的直徑 否則繪制到盒子外面就看不見了 // 一開始設置 width:; :; 發現 在分辨率的設備，下繪制的圓環跑盒子外去了 // 小程序使用rpx單位適配 ，但是繪制的是px單位的。所以只能用px單位繪制的圓環在盒子內顯示 : flex; align-items: ; -: ; -color: #eee; } .{ : ; width:220px; : 220px; } .{ width:220px; : 220px; } .{ : ; : flex; align-items: ; -: } .{ font-size: 36rpx; -left: 16rpx; -: 2rpx } .{ width:16rpx; : 16rpx; -: 50%; -color: #; } 第二步數據綁定
從wxml中可以看到我們使用了一個數據小程序canvas圓形圖片，所以在js中設置data如下：
data: { : '正在匹配中...', }, 第三步繪制
敲黑板，劃重點。
1.先繪制背景
在js中封裝一個畫圓環的函數， 畫圓 在中執行這個函數；
小程序組件與H5的有點差別，請查看文檔，代碼如下：
: (){ // 使用 wx. 獲取繪圖上下文 var ctx = wx.('') ctx.(4);// 設置圓環的寬度 ctx.('#'); // 設置圓環的顏色 ctx.('round') // 設置圓環端點的形狀 ctx.();//開始一個新的路徑 ctx.arc(110, 110, 100, 0, 2 * Math.PI, false); //設置一個原點(100,100)，半徑為90的圓的路徑到當前路徑 ctx.();//對當前路徑進行描邊 ctx.draw(); }, : () { this.(); },
看一下效果如下：
2.繪制彩色圓環
在js中封裝一個畫圓環的函數小程序canvas圓形圖片， 在中執行這個函數；
代碼如下：
: (step){ var = wx.(''); // 設置漸變 var = .(200, 100, 100, 200); .("0", "#"); .("0.5", "#"); .("1.0", "#");.(10); .(); .('round') .(); // 參數step 為繪制的圓環周長，從0到2為一周 。 -Math.PI / 2 將起始角設在12點鐘位置 ，結束角 通過改變 step 的值確定 .arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false); .(); .draw() }, : () { this.(); this.(2) },
效果：
3.設置一個定時器
在js中的data設置一個計數器 count,一個步驟step,一個定時器 在js中封裝一個定時器的函數， 在中執行這個函數；
代碼如下：
data: { : '正在匹配中...', count:0, // 設置 計數器 初始為0 : null // 設置 定時器 初始為null }, : () { // 設置倒計時 定時器 每100毫秒執行一次，計數器count+1 ,耗時6秒繪一圈 this. = (() => { if (this.data.count