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

[code]setInterval()
setTimeout()
requestAnimationFrame()
clearInterval()
clearTimeout()
cancelAnimationFrame()

[code]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)

[code]//用延时器做动画
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);

[code]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);
}

[code]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()
})
}

[code]
//碰撞检测
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
})