微信小程序中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实现异步刷新的代码(转载)
Mar 29 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 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
destoon复制新模块的方法
2014/06/21 PHP
扩展String功能方法
2006/09/22 Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python yield使用方法示例
2013/12/04 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
python实现画出e指数函数的图像
2019/11/21 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
冰淇淋店的创业计划书
2014/02/07 职场文书
网络技术专业求职信
2014/02/18 职场文书
学校联谊协议书
2014/09/16 职场文书
公民授权委托书
2014/10/15 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python