微信小程序中setInterval的使用方法
在商都等地區,都構建了全面的區域性戰略布局,加強發展的系統性、市場前瞻性、產品創新能力,以專注、極致的服務理念,為客戶提供網站制作、成都網站建設 網站設計制作定制制作,公司網站建設,企業網站建設,成都品牌網站建設,成都全網營銷推廣,成都外貿網站建設公司,商都網站建設費用合理。
看了下小程序的畫布功能,簡單的使用了一下,用蹩腳的邏輯做了個 “彈啊彈,彈走魚尾紋的小球”,一起來看下吧。過程不重要主要是畫布的使用哦。(本來想傳gif的來著,后來發現不會傳,就傳個圖片吧,想看的自己下載下來玩呦)
先上圖,后上代碼了:
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(){ //循環滾動小球 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:
canvas-id="ball">
如有疑問請留言或者到本站社區交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
網站題目:微信小程序中setInterval的使用方法
文章網址:http://m.newbst.com/article8/ijsgop.html
成都網站建設公司_創新互聯,為您提供企業網站制作、網站制作、面包屑導航、用戶體驗、商城網站、定制網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯