评论

利用canvas实现,不用setData实现倒计时

利用canvas实现,不用setData实现倒计时,同时能监控方法调用

<canvas canvas-id=“djs” style=“height:100px;width: 100px;” class=“canvas”></canvas>
let seconds = 60
let app = getApp()
Page({
onReady(){
clearInterval(app.globalData.djs)
this.initCanvas()
},
initCanvas(){
let ctx = wx.createCanvasContext(‘djs’);
app.globalData.djs = setInterval(()=>{
if( seconds >= 0 ){
// 清除之前的绘制内容
console.log(seconds)
ctx.clearRect(0, 0, 100, 100);
//设置透明度
ctx.setGlobalAlpha(1)
//设置默认颜色
ctx.setFillStyle(’#fff’)
//设置一个矩形
ctx.fillRect(0, 0, 100, 100)
//填充默认颜色
ctx.setFillStyle(’#000’)
ctx.setFontSize(16)
ctx.fillText(seconds+‘秒’, 10, 30);
// 绘制到画布
ctx.draw(); // true 表示绘制完成后进行绘制层提交
seconds = seconds - 1
}else{
clearInterval(app.globalData.djs)
}
},1000)

}
})

最后一次编辑于  08-23  
点赞 0
收藏
评论
登录 后发表内容