微信小程序中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 相关文章推荐
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
Vue渲染过程浅析
Mar 14 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 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自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python 弧度与角度互转实例
2020/04/15 Python
Django Form常用功能及代码示例
2020/10/13 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
化学教育专业求职信
2014/07/08 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
主题班会开场白
2015/06/01 职场文书
南极大冒险观后感
2015/06/05 职场文书
风之谷观后感
2015/06/11 职场文书
2016国培研修心得体会
2016/01/08 职场文书
银行工作心得体会范文
2016/01/23 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers