微信小程序中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">
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“微信小程序中setInterval的使用方法”评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?