canvas動畫

06-07

canvas動畫

1,今天改論文時改了一天有點累不意見看到自己U盤裡寫了好多原生的動畫，突然想分享出來給大家看看有什麼不足的希望大家指出，或都大家有什好的想可以聯繫我們大寫一起學習，本人還是一名要踏出學校的一名大四學生，希望我未來在工作的經驗給總結出來分享與大家一起學習一起進步，也希望有大神多多指點。

2代碼如下，有那些地方看懂的可以在聯繫我，我與大家學習。

<!doctype html>

<html>

<head>

<title>無標題文檔</title>

<style>

*{ margin:0;padding:0}

body{background:#000;}

</style>

window.onload=function(){

var oC=document.getElementById("c1");

var oGc=oC.getContext("2d");

setArr=[];

setInterval(function(){

oGc.clearRect(0,0,oC.width,oC.height);;

for(var i=0;i<setArr.length;i++){

setArr[i].sY+=0.02;

setArr[i].x+=setArr[i].sX;

setArr[i].y+=setArr[i].sY;

setArr[i].r+=0.01;

if(setArr[i].y>=oC.height-setArr[i].r){

setArr[i].y=oC.height-setArr[i].r;

setArr[i].sY=-1;

setArr[i].sY*=0.9;

setArr[i].sX*=0.9;

if(Math.abs(setArr[i].sX)<=0.1){

setArr.splice(i,1);

}

for(var i=0;i<setArr.length;i++){

oGc.beginPath();

oGc.fillStyle=rgba(+setArr[i].c1+,+setArr[i].c2+,+setArr[i].c3+,+setArr[i].c4+);

oGc.moveTo(setArr[i].x,setArr[i].y);

oGc.arc(setArr[i].x,setArr[i].y,setArr[i].r,0,360*Math.PI/180,false);

oGc.closePath();

oGc.fill();

}

},1000/60)

setInterval(function(){

var x=oC.width/2;

var y=oC.height-20;

var c1=Math.floor(Math.random()*255);

var c2=Math.floor(Math.random()*255);

var c3=Math.floor(Math.random()*255);

var c4=1;

var r=10;

var sX=Math.random()*10-6;

var sY=-(Math.random()*6+1);

setArr.push({

x:x,

y:y,

r:r,

c1:c1,

c2:c2,

c3:c3,

c4:c4,

sX:sX,

sY:sY

})

},100)

}

</script>

</head>

<body>

</body>

</html>