微信小程序游戏-----动画

setInterval() setTimeout() requestAnimationFrame() clearInterval() clearTimeout() cancelAnimationFrame()

var canvas =wx.createCanvas() var ctx =canvas.getContext("2d")  ctx.fillStyle ="red" ctx.fillRect(0,0,100,100) ctx.clearRect(0,0,canvas.width,canvas.height)  //清除画布 ctx.fillRect(0,20,100,100) ctx.clearRect(0,0,canvas.width,canvas.height) ctx.fillRect(0,150,100,100) var num =0 var timer=setInterval(function(){     num++     ctx.clearRect(0,0,canvas.width,canvas.height)     ctx.fillRect(0,num++,100,100)     if(num>150){         clearInterval(timer)     } },20)

 

//用延时器做动画 var canvas =wx.createCanvas() var ctx =canvas.getContext("2d")   ctx.fillStyle ="red"  //延迟定时器去做 ctx.fillRect(0,0,100,100) setTimeout(() => {     ctx.clearRect(0,0,canvas.width,canvas.height)       ctx.fillRect(0,150,100,100) }, 500);

var canvas =wx.createCanvas() var ctx =canvas.getContext("2d")   ctx.fillStyle ="red" VAR TIMER =NULL  //延迟定时器去做 ctx.fillRect(0,0,100,100) var num =0; loop() function loop(){     num ++     TIMER= setTimeout(() => {         ctx.clearRect(0,0,canvas.width,canvas.height)           ctx.fillRect(0,num,100,100)         if(num<150){            clearTimeout(TIMER)         }              }, 20); }

var canvas = wx.createCanvas(); var ctx = canvas.getContext("2d");  ctx.fillStyle = "red"; //requestAnimationFrame var num = 0 loop() function loop(){     num++     requestAnimationFrame(function(){             ctx.clearRect(0,0,canvas.width,canvas.height)             ctx.fillRect(0,num,100,100)             loop()     }) }

 //碰撞检测 var canvas = wx.createCanvas(); var ctx = canvas.getContext("2d");  var img = wx.createImage(); var firstX = 0; var firstY = 0; var imgW = 100; var imgH = 100; var isShow = false;  img.src = "./source/2.jpg"; img.onload = function() {   ctx.drawImage(img, firstX, firstY, imgW, imgH); };  wx.onTouchStart(function(e) {   var touch = e.changedTouches[0];   var clientX = touch.clientX;   var clienty = touch.clientY;   if (     firstX < clientX &&     clientX < firstX + imgW &&     (firstY < clienty && clienty < firstY + imgH)   ) {     isShow = true;   } });  wx.onTouchMove(function(e) {   if (isShow) {     ctx.clearRect(0, 0, canvas.width, canvas.height); //清除画布     var touch = e.changedTouches[0];     var clientX = touch.clientX;     var clienty = touch.clientY;     if((clientX-imgW/2)<0){         firstX =0     }else if((clientX-imgW/2)>(canvas.width-imgW)){         firstX = canvas.width-imgW     }else{         firstX = clientX-imgW/2     }      if((clienty-imgH/2)<0){         firstY =0     }else if((clienty-imgH/2)>(canvas.height-imgH)){         firstY =(canvas.height-imgH)     }else{         firstY = clienty-imgH/2     }     ctx.drawImage(img,firstX,firstY,imgW,imgH);   } }); wx.onTouchEnd(function(){     isShow = false })

 

转载请标明出处:微信小程序游戏-----动画

文章来源: https://blog.csdn.net/weixin_41069726/article/details/88766422