258资源分享网

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

看了下小程序的画布功能，简单的使用了一下，用蹩脚的逻辑做了个 “弹啊弹，弹走鱼尾纹的小球”，一起来看下吧。过程不重要主要是画布的使用哦。（本来想传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

}

//画图