微信小程序中setInterval的使用方法
网络编程 2021-07-04 17:32www.168986.cn编程入门
这篇文章主要介绍了微信小程序中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({ suess: 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">
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程