微信小程序中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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
JS 判断代码全收集
Apr 28 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
javascript json 新手入门文档
2009/12/03 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python计算两个矩形框重合百分比的实例
2018/11/07 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
银行先进个人总结
2015/02/15 职场文书
暑假生活随笔
2015/08/15 职场文书
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技