위 챗 애플 릿 의 setInterval 사용 방법

위 챗 애플 릿 의 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"> 

궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!