欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-28 23:37:01
微信小程序中setinterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 “弹啊弹,弹走鱼尾纹的小球”,一起来看下吧。过程不重要主要是画...

微信小程序中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() // 获取绘图动作数组 
  }) 
 } 
}) 

wxml:

   canvas-id="ball"> 

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