微信小程序中setInterval的使用方法

微信小程序中setInterval的使用方法

在商都等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供網(wǎng)站制作、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,商都網(wǎng)站建設(shè)費用合理。

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

先上圖,后上代碼了:

微信小程序中setInterval的使用方法

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(){ 
   //循環(huán)滾動小球 
   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軸的狀態(tài) 
  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軸的狀態(tài) 
  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() 
  // 調(diào)用 wx.drawCanvas,通過 canvasId 指定在哪張畫布上繪制,通過 actions 指定繪制行為 
  wx.drawCanvas({ 
   canvasId: 'ball', 
   actions: context.getActions() // 獲取繪圖動作數(shù)組 
  }) 
 } 
}) 

wxml:

   canvas-id="ball"> 

如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

網(wǎng)站題目:微信小程序中setInterval的使用方法
文章網(wǎng)址:http://www.muchs.cn/article8/ijsgop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、網(wǎng)站制作、面包屑導(dǎo)航用戶體驗、商城網(wǎng)站定制網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)