微信小程序 使用canvas画圆形倒计时

圆形倒计时"/>

微信小程序 使用canvas画圆形倒计时

先来效果图

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 获取绘图上下文 contextvar 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()// 每完成一次全程绘制就+1num++;}// 倒计时前先绘制整圆的圆环ringMove(start, end);// 创建倒计时time = setInterval(animation, animation_interval);},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {this.drawProgressbg(); },/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})