微信小程序中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 相关文章推荐
JavaScript中的style.display属性操作
Mar 27 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
详解python算法之冒泡排序
2019/03/05 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
临床医学大学生求职信
2013/09/28 职场文书
地理科学专业毕业生求职信
2013/10/15 职场文书
班主任工作经验材料
2014/02/02 职场文书
保险专业自荐信范文
2014/02/20 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS