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
})