网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

小程序中的垂直居中

發布時間：2017-12-29 18:19 所屬欄目：小程序開發教程

看了下小程序的畫布功能，簡單的使用了一下，用蹩腳的邏輯做了個 “彈啊彈，彈走魚尾紋的小球”，一起來看下吧。過程不重要主要是畫布的使用哦。（本來想傳gif的來著，后來發現不會傳，就傳個圖片吧，想看的自己下載下來玩呦）

 

先上圖，后上代碼了：

 

 

 

 

js:

 

[javascript] view plain copy
 
 
 
  1. var winWidth = 0  
  2. var winHeight = 0  
  3. var diameter = 10  
  4. var time = 0  
  5.   
  6. Page({  
  7.   data:{  
  8.     numX:1,  
  9.     numY:1  
  10.   },  
  11.   xy:{  
  12.     //小球的xy坐標  
  13.     x:10,  
  14.     y:10  
  15.   },  
  16.   
  17.   onLoad:function(options){  
  18.     //進來先獲取手機的屏幕寬度和高度  
  19.     wx.getSystemInfo({  
  20.       success: function(res) {  
  21.         console.log(res)  
  22.         winHeight = res.windowHeight;  
  23.         winWidth = res.windowWidth;  
  24.       }  
  25.     })  
  26.   },  
  27.   
  28.   onReady:function(){  
  29.      //循環滾動小球  
  30.      for(var i=0;i<1;i++){  
  31.         //隨機一個滾動的速度  
  32.         time = (1+Math.random()*10)  
  33.         setInterval(this.move,time);  
  34.         console.log(time)  
  35.      }  
  36.   },  
  37.   move(){  
  38.     //x   
  39.     if(this.data.numX == 1){  
  40.       this.xy.x++  
  41.     }else{  
  42.       this.xy.x--  
  43.     }  
  44.   
  45.     //判斷x軸的狀態  
  46.     if(this.xy.x == winWidth-diameter){  
  47.        this.data.numX=2  
  48.     }  
  49.     if(this.xy.x == diameter){  
  50.        this.data.numX=1  
  51.     }  
  52.   
  53.     //y  
  54.     if(this.data.numY == 1){  
  55.        this.xy.y++  
  56.     }else{  
  57.        this.xy.y--  
  58.     }  
  59.   
  60.     //判斷y軸的狀態  
  61.     if(this.xy.y == 400-diameter){  
  62.        this.data.numY=2  
  63.     }  
  64.     if(this.xy.y == diameter){  
  65.        this.data.numY=1  
  66.     }  
  67.   
  68.     //畫圖  
  69.     this.ballMove(this.xy.x,this.xy.y);  
  70.   },  
  71.   
  72.   
  73.   ballMove(x,y){  
  74.     // 使用 wx.createContext 獲取繪圖上下文 context  
  75.     var context = wx.createContext()  
  76.     // context.setShadow(0,1,6,'#000000')//陰影效果  
  77.     context.setFillStyle("#FF4500")//球的顏色  
  78.     context.setLineWidth(2)  
  79.     context.arc(x, y, diameter, 0, 2 * Math.PI, true)  
  80.     context.fill()  
  81.   
  82.     // 調用 wx.drawCanvas，通過 canvasId 指定在哪張畫布上繪制，通過 actions 指定繪制行為  
  83.     wx.drawCanvas({  
  84.       canvasId: 'ball',  
  85.       actions: context.getActions() // 獲取繪圖動作數組  
  86.     })  
  87.   }  
  88. })  

 

wxml:

 

[html] view plain copy
 
 
 
  1. <view>  
  2.     <canvas canvas-id="ball"></canvas>  
  3. </view>  
 


易優小程序（企業版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.xiuhaier.com/wxmini/doc/course/18317.html 復制鏈接 如需定制請聯系易優客服咨詢：800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×