微信小程序setInterval使用方法

Z时代
2024-01-10
分类：技术分享

微信小程序中setInterval的使用方法

看了下小程序的画布功能，简单的使用了一下，用蹩脚的逻辑做了个 “弹啊弹，弹走鱼尾纹的小球”，一起来看下吧。过程不重要主要是画布的使用哦。（本来想传gif的来着，后来发现不会传，就传个图片吧，想看的自己下载下来玩呦）

先上图，后上代码了：

微信小程序中setInterval的使用方法/张生荣

js:

var winWidth = 0
var winHeight = 0
var diameter = 10
var time = 0
Page({
data:{
numX:1,
numY:1
},
xy:{
//小球的xy坐标
x:10,
y:10
},
onLoad:function(options){
//进来先获取手机的屏幕宽度和高度
wx.getSystemInfo({
success: function(res) {
console.log(res)
winHeight = res.windowHeight;
winWidth = res.windowWidth;
}
})
},
onReady:function(){
//循环滚动小球
for(var i=0;i<1;i++){
//随机一个滚动的速度
time = (1+Math.random()*10)
setInterval(this.move,time);
console.log(time)
}
},
move(){
//x
if(this.data.numX == 1){
this.xy.x++
}else{
this.xy.x--
}
//判断x轴的状态
if(this.xy.x == winWidth-diameter){
this.data.numX=2
}
if(this.xy.x == diameter){
this.data.numX=1
}
//y
if(this.data.numY == 1){
this.xy.y++
}else{
this.xy.y--
}
//判断y轴的状态
if(this.xy.y == 400-diameter){
this.data.numY=2
}
if(this.xy.y == diameter){
this.data.numY=1
}
//画图
this.ballMove(this.xy.x,this.xy.y);
},
ballMove(x,y){
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createContext()
// context.setShadow(0,1,6,'#000000')//阴影效果
context.setFillStyle("#FF4500")//球的颜色
context.setLineWidth(2)
context.arc(x, y, diameter, 0, 2 * Math.PI, true)
context.fill()
// 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
wx.drawCanvas({
canvasId: 'ball',
actions: context.getActions() // 获取绘图动作数组
})
}
})