溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
微信小程序中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">
如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
