最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 22:28:29
文档

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

微信小程序中setInterval的使用方法:微信小程序中setInterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 弹啊弹,弹走鱼尾纹的小球,一起来看下吧。过程不重要主要是画布的使用哦。(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩
推荐度:
导读微信小程序中setInterval的使用方法:微信小程序中setInterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 弹啊弹,弹走鱼尾纹的小球,一起来看下吧。过程不重要主要是画布的使用哦。(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩


微信小程序中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的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 弹啊弹,弹走鱼尾纹的小球,一起来看下吧。过程不重要主要是画布的使用哦。(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top