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


Posted in Javascript onSeptember 29, 2017

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

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

Javascript 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
vue生成随机验证码的示例代码
Sep 29 #Javascript
JS设计模式之单例模式(一)
Sep 29 #Javascript
微信小程序的日期选择器的实例详解
Sep 29 #Javascript
JS设计模式之惰性模式(二)
Sep 29 #Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 #Javascript
详解用Node.js实现Restful风格webservice
Sep 29 #Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 #Javascript
You might like
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
python 自动重连wifi windows的方法
2018/12/18 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
python中with用法讲解
2020/02/07 Python
Python使用type动态创建类操作示例
2020/02/29 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
怎么快速自学python
2020/06/22 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
护理实习自我鉴定
2013/12/14 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
关于旅游的活动方案
2014/08/15 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
工作经验交流材料
2014/12/30 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python