看了下小程序的画布功能，简单的使用了一下，用蹩脚的逻辑做了个 “弹啊弹，弹走鱼尾纹的小球”，一起来看下吧。过程不重要主要是画布的使用哦。（本来想传gif的来着，后来发现不会传，就传个图片吧，想看的自己下载下来玩呦）
先上图，后上代码了：
js:
-
var winWidth = 0
-
var winHeight = 0
-
var diameter = 10
-
var time = 0
-
-
Page({
-
data:{
-
numX:1,
-
numY:1
-
},
-
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(){
-
-
if(this.data.numX == 1){
-
this.xy.x++
-
}else{
-
this.xy.x--
-
}
-
-
-
if(this.xy.x == winWidth-diameter){
-
this.data.numX=2
-
}
-
if(this.xy.x == diameter){
-
this.data.numX=1
-
}
-
-
-
if(this.data.numY == 1){
-
this.xy.y++
-
}else{
-
this.xy.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){
-
-
var context = wx.createContext()
-
-
context.setFillStyle("#FF4500")
-
context.setLineWidth(2)
-
context.arc(x, y, diameter, 0, 2 * Math.PI, true)
-
context.fill()
-
-
-
wx.drawCanvas({
-
canvasId: 'ball',
-
actions: context.getActions()
-
})
-
}
-
})
wxml:
-
<view>
-
<canvas canvas-id="ball"></canvas>
-
</view>
