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

 更新时间:2017年09月29日 11:05:18   作者:乔妹  
这篇文章主要介绍了微信小程序中setInterval的使用方法的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

微信小程序中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"> 

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

相关文章

  • 微信小程序 页面跳转传参详解

    微信小程序 页面跳转传参详解

    这篇文章主要介绍了微信小程序 页面跳转传参详解的相关资料,并附简单实例,和实现效果图,需要的朋友可以参考下
    2016-10-10
  • javascript条件式访问属性和箭头函数介绍

    javascript条件式访问属性和箭头函数介绍

    这篇文章主要介绍了javascript条件式访问属性和箭头函数,下面文章围绕条件式访问属性和箭头函数的相关资料展开文章内容,需要的朋友可以参考一下
    2021-11-11
  • 微信小程序 获取相册照片实例详解

    微信小程序 获取相册照片实例详解

    这篇文章主要介绍了微信小程序 获取相册照片实例详解的相关资料,需要的朋友可以参考下
    2016-11-11
  • 微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解

    这篇文章主要介绍了微信小程序 动态传参实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • js 交互在Flutter 中使用 webview_flutter

    js 交互在Flutter 中使用 webview_flutter

    这篇文章主要为大家介绍了js 交互在Flutter 中使用 webview_flutter示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 在js中修改html body的样式

    在js中修改html body的样式

    这篇文章主要介绍了在js中修改html body的样式,下面文章围绕js修改html 和body样式的相关资料展开详细内容,需要的朋友可以参考一下,希望对大家有所帮助
    2021-11-11
  • 关于JavaScript轮播图的实现

    关于JavaScript轮播图的实现

    这篇文章主要介绍了关于JavaScript轮播图的实现,下面文章主要是利用利用html 和 css 代码实现轮播图,详细内容请参考下面详细内容,希望对你有所帮助
    2021-11-11
  • JavaScript 中for/of,for/in 的详细介绍

    JavaScript 中for/of,for/in 的详细介绍

    这篇文章主要介绍了JavaScript 中的for/of, for/in,在 JavaScript中,for 循环有几种常见的写法,西阿棉文章有写法的详细内容,需要的朋友可以参考一下
    2021-11-11
  • 接收键盘指令的脚本

    接收键盘指令的脚本

    接收键盘指令的脚本...
    2006-06-06
  • umi插件开发仿dumi项目实现markdown文件转为页面

    umi插件开发仿dumi项目实现markdown文件转为页面

    这篇文章主要介绍了umi插件开发仿dumi项目实现markdown文件转为页面方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论