微信小程序中setInterval的使用方法

微信小程序中setInterval的使用方法

看了下小程序的画布功能，简单的使用了一下，用蹩脚的逻辑做了个 “弹啊弹，弹走鱼尾纹的小球”，一起来看下吧。过程不重要主要是画布的使用哦。（本来想传gif的来着，后来发现不会传，就传个图片吧，想看的自己下载下来玩呦）

先上图，后上代码了：

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"> 

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 小程序  # setInterval  # 微信小程序  # setInterval的使用方法  # setInterval的详解  # 微信小程序中button组件的边框设置的实例详解  # Thinkphp5微信小程序获取用户信息接口的实例详解  # 微信小程序url与token设置详解  # 微信小程序开发之好友列表字母列表跳转对应位置  # 微信小程序之蓝牙的链接  # 微信小程序中post方法与get方法的封装  # 看了  # 如有  # 希望能  # 想看  # 谢谢大家  # 不重要  # 来玩  # 下吧  # 上图  # 主要是  # 疑问请  # 使用了  # 图片吧  # diameter  # Page  # time  # numX  # data  # numY  # options 

相关文章： 官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  如何做静态网页,sublimetext3.0制作静态网页？  香港服务器WordPress建站指南：SEO优化与高效部署策略  如何在Ubuntu系统下快速搭建WordPress个人网站？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  上海网站制作开发公司,上海买房比较好的网站有哪些？  如何设计高效校园网站？  商务网站制作工程师,从哪几个方面把握电子商务网站主页和页面的特色设计？  深圳网站制作费用多少钱,读秀，深圳文献港这样的网站很多只提供网上试读，但有些人只要提供试读的文章就能全篇下载，这个是怎么弄的？  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  如何在IIS中新建站点并解决端口绑定冲突？  南宁网站建设制作定制,南宁网站建设可以定制吗？  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  青岛网站设计制作公司,查询青岛招聘信息的网站有哪些？  如何快速搭建高效服务器建站系统？  C++中引用和指针有什么区别？（代码说明）  html制作网站的步骤有哪些,iapp如何添加网页？  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  如何用搬瓦工VPS快速搭建个人网站？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  如何用美橙互联一键搭建多站合一网站？  微网站制作教程,我微信里的网站怎么才能复制到浏览器里？  如何选择高效响应式自助建站源码系统？  广平建站公司哪家专业可靠？如何选择？  如何通过宝塔面板实现本地网站访问？  公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  如何快速搭建支持数据库操作的智能建站平台？  如何高效搭建专业期货交易平台网站？  教程网站设计制作软件,怎么创建自己的一个网站？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  广州建站公司哪家好？十大优质服务商推荐  简历在线制作网站免费,免费下载个人简历的网站是哪些？  建站之星logo尺寸如何设置最合适？  建站主机如何选？高性价比方案全解析  高端建站三要素：定制模板、企业官网与响应式设计优化  湖州网站制作公司有哪些,浙江中蓝新能源公司官网？  建站之星价格显示格式升级，你的预算足够吗？  高防服务器租用指南：配置选择与快速部署攻略  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  如何快速搭建个人网站并优化SEO？  如何自定义建站之星模板颜色并下载新样式？  建站之星代理商如何保障技术支持与售后服务？  专业公司网站制作公司,用什么语言做企业网站比较好？  青浦网站制作公司有哪些,苹果官网发货地是哪里？  ,石家庄四十八中学官网？  如何在VPS电脑上快速搭建网站？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  淘宝制作网站有哪些,淘宝网官网主页？  微网站制作教程,不会写代码，不会编程，怎么样建自己的网站？