微信小程序中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_12_执行模型浅析
Oct 18 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
ThinkPHP分页实例
2014/10/15 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
javascript如何写热点图
2015/12/08 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
Vue 数据响应式相关总结
2021/01/28 Vue.js
python生成指定长度的随机数密码
2014/01/23 Python
Python中return语句用法实例分析
2015/08/04 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
python实现接口并发测试脚本
2019/06/25 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
采购助理岗位职责
2014/02/16 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
话题作文之诚信
2019/11/28 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android