您的位置: 首页  >  文章  >  微信小程序中setInterval的使用

微信小程序中setInterval的使用

分类: 文章 • 2025-03-23 23:13:57

转：http://blog.****.net/siwen1990


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


先上图，后上代码了：

微信小程序中setInterval的使用


微信小程序中setInterval的使用


微信小程序中setInterval的使用


微信小程序中setInterval的使用


js:

[javascript] view plain copy
 print?
  1. var winWidth = 0  
  2. var winHeight = 0  
  3. var diameter = 10  
  4. var time = 0  
  5.   
  6. Page({  
  7.   data:{  
  8.     numX:1,  
  9.     numY:1  
  10.   },  
  11.   xy:{  
  12.     //小球的xy坐标  
  13.     x:10,  
  14.     y:10  
  15.   },  
  16.   
  17.   onLoad:function(options){  
  18.     //进来先获取手机的屏幕宽度和高度  
  19.     wx.getSystemInfo({  
  20.       success: function(res) {  
  21.         console.log(res)  
  22.         winHeight = res.windowHeight;  
  23.         winWidth = res.windowWidth;  
  24.       }  
  25.     })  
  26.   },  
  27.   
  28.   onReady:function(){  
  29.      //循环滚动小球  
  30.      for(var i=0;i<1;i++){  
  31.         //随机一个滚动的速度  
  32.         time = (1+Math.random()*10)  
  33.         setInterval(this.move,time);  
  34.         console.log(time)  
  35.      }  
  36.   },  
  37.   move(){  
  38.     //x   
  39.     if(this.data.numX == 1){  
  40.       this.xy.x++  
  41.     }else{  
  42.       this.xy.x--  
  43.     }  
  44.   
  45.     //判断x轴的状态  
  46.     if(this.xy.x == winWidth-diameter){  
  47.        this.data.numX=2  
  48.     }  
  49.     if(this.xy.x == diameter){  
  50.        this.data.numX=1  
  51.     }  
  52.   
  53.     //y  
  54.     if(this.data.numY == 1){  
  55.        this.xy.y++  
  56.     }else{  
  57.        this.xy.y--  
  58.     }  
  59.   
  60.     //判断y轴的状态  
  61.     if(this.xy.y == 400-diameter){  
  62.        this.data.numY=2  
  63.     }  
  64.     if(this.xy.y == diameter){  
  65.        this.data.numY=1  
  66.     }  
  67.   
  68.     //画图  
  69.     this.ballMove(this.xy.x,this.xy.y);  
  70.   },  
  71.   
  72.   
  73.   ballMove(x,y){  
  74.     // 使用 wx.createContext 获取绘图上下文 context  
  75.     var context = wx.createContext()  
  76.     // context.setShadow(0,1,6,'#000000')//阴影效果  
  77.     context.setFillStyle("#FF4500")//球的颜色  
  78.     context.setLineWidth(2)  
  79.     context.arc(x, y, diameter, 0, 2 * Math.PI, true)  
  80.     context.fill()  
  81.   
  82.     // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为  
  83.     wx.drawCanvas({  
  84.       canvasId: 'ball',  
  85.       actions: context.getActions() // 获取绘图动作数组  
  86.     })  
  87.   }  
  88. })  

wxml:

[html] view plain copy
 print?
  1. <view>  
  2.     <canvas canvas-id="ball"></canvas>  
  3. </view>  

相关推荐