利用canvas实现倒计时功能

前端之家收集整理的这篇文章主要介绍了利用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

猜你在找的XML相关文章