先来效果图
wxml页面
<view class="container">
<view class='progress_box'>
<canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas>
<canvas class="progress_canvas" canvas-id="secondCanvas"></canvas>
</view>
</view>
wxss页面
.progress_box{
position: relative;
width:84px;
height: 84px;
display: flex;
align-items: center;
justify-content: center;
background-color: #03abfd;
border-radius: 84px;
}
.progress_bg{
position: absolute;
width:84px;
height: 84px;
}
.progress_canvas{
width:84px;
height: 84px;
}
js页面
// page/process/process.js
Page({
/**
* 页面的初始数据
*/
data: {
},
drawProgressbg: function () {
// 使用 wx.createContext 获取绘图上下文 context
var ctx = wx.createCanvasContext('canvasProgressbg')
ctx.setLineWidth(15);// 设置圆环的宽度
ctx.setStrokeStyle('#F18136'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(42, 42, 30, 0, 2 * Math.PI, false);
//设置一个原点(100,100),半径为90的圆的路径到当前路径
ctx.stroke();//对当前路径进行描边
ctx.draw();
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var step = 1,//计数动画次数
num = 0,//计数倒计时秒数(n - num)
start = 1.5 * Math.PI,// 开始的弧度
end = -0.5 * Math.PI,// 结束的弧度
time = null;// 计时器容器
var animation_interval = 1000,// 每1秒运行一次计时器
n = 10; // 当前倒计时为10秒
// 动画函数
function animation() {
if (step <= n) {
end = end + 2 * Math.PI / n;
ringMove(start, end);
step++;
} else {
clearInterval(time);
}
};
// 画布绘画函数
function ringMove(s, e) {
var context = wx.createCanvasContext('secondCanvas')
var gradient = context.createLinearGradient(200, 100, 100, 200);
gradient.addColorStop("0", "#2661DD");
gradient.addColorStop("0.5", "#40ED94");
gradient.addColorStop("1.0", "#5956CC");
// 绘制圆环
context.setStrokeStyle('#f6cbf4')
context.beginPath()
context.setLineWidth(10)
context.arc(42, 42, 30, s, e, true)
context.stroke()
context.closePath()
// 绘制倒计时文本
context.beginPath()
context.setLineWidth(1)
context.setFontSize(30)
context.setFillStyle('#ffffff')
context.setTextAlign('center')
context.setTextBaseline('middle')
context.fillText(n - num + '', 42, 42, 30)
context.fill()
context.closePath()
context.draw()
// 每完成一次全程绘制就+1
num++;
}
// 倒计时前先绘制整圆的圆环
ringMove(start, end);
// 创建倒计时
time = setInterval(animation, animation_interval);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.drawProgressbg();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})