利用canvas实现倒计时功能

?

wxml代码：
<view class=“page-body”>
<view class=“page-body-wrapper”>
<canvas canvas-id=“canvas” class=“canvas”></canvas>
</view>
</view>

js代码：
onReady: function () {

this.totalTime = 30
this.interval = setInterval(this.drawText,1000)
},
drawText: function (){
var context = wx.createCanvasContext(“canvas”)
var _totalTime = this.totalTime
function text(t)
{
context.setFontSize(20)
context.fillText(t,100,100)
}
text(_totalTime)

_totalTime = _totalTime - 1
this.totalTime = _totalTime

context.draw(false,dd=>{
if (this.totalTime < 0)
{
this.totalTime = 30
}
})
},

更多代码详情：https://github.crmeb.net/u/LXT