微信小程序中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 相关文章推荐
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
全面解析bootstrap格子布局
May 22 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP的加密方式及原理
2012/06/14 PHP
php 问卷调查结果统计
2015/10/08 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python代码注释规范代码实例解析
2020/08/14 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
园林设计师自荐信
2013/11/18 职场文书
校班主任推荐信范文
2013/12/03 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
副总经理岗位职责
2015/02/02 职场文书
德能勤绩工作总结
2015/08/11 职场文书
诚信考试主题班会
2015/08/17 职场文书
八年级作文之感恩
2019/11/22 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技