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

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

先上图，后上代码了：









js:

[javascript] view
plain copy

 print?

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:

[html] view
plain copy

 print?





<view>  

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

</view>  

demo下载：弹力小球

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