首页 > 编程 > JavaScript > 正文

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

2019-11-19 15:14:58
字体:
来源:转载
供稿:网友

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

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

先上图,后上代码了:

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() // 获取绘图动作数组   })  } }) 

wxml:

   canvas-id="ball"> 

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表