微信小程序_小球弹啊弹(画布的简单使用)

来源：互联网发布：c语言中随机函数编辑：程序博客网时间：2024/05/16 14:49

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

先上图，后上代码了：

js:

var winWidth = 0var winHeight = 0var diameter = 10var time = 0Page({  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:

<view>    <canvas canvas-id="ball"></canvas></view>

demo下载：弹力小球

感谢观看，学以致用更感谢~

0 0