canvas动画

用canvas做动画的过程跟dom运动的原理一样，都是利用setInterval来连续执行从而达到动画的效果，canvas一般分为以下几个步骤：

1.声明一个数组用来存储画布里面需要画的图形的数据，然后通过setInterval来不断往里面添加数据，例如：

setInterval(function(){
        var x = Math.floor(oC.width/2);
        var y = Math.floor(oC.height-20);
        var r = 10;
        var R = Math.floor(Math.random()*255);
        var G = Math.floor(Math.random()*255);
        var B = Math.floor(Math.random()*255);
        var A = 1;
        var sx = Math.random()*6-3;
        var sy = -(Math.random()*3+1);
        
        dataArr.push({
            x : x,
            y : y,
            r : r,
            R : R,
            G : G,
            B : B,
            A : A,
            sx: sx,
            sy: sy
        });
    },200);

2.通过另一个setInterval来不断地更新canvas里面的内容，每次更新之前记得清楚画布，然后把数组里面的数据画到画布上。

setInterval(function(){
        oGC.clearRect(0,0,oC.width,oC.height);
        for(var i=0;i<dataArr.length;i++){
            oGC.beginPath();
            oGC.fillStyle = 'rgba('+dataArr[i].R+','+dataArr[i].G+','+dataArr[i].B+','+dataArr[i].A+')';
            oGC.moveTo(dataArr[i].x,dataArr[i].y);
            oGC.arc(dataArr[i].x,dataArr[i].y,dataArr[i].r,0,360*Math.PI/180,false);
            oGC.closePath();
            oGC.fill();
            if(dataArr[i].y >= oC.height - dataArr[i].r){
                dataArr[i].y = oC.height - dataArr[i].r
                dataArr[i].sy *= -1;
                dataArr[i].sy *= 0.9;
                dataArr[i].sx *= 0.9;
            }
            if(Math.abs(dataArr[i].sx) <= 0.05 ){
                dataArr.splice(i,1);
                continue;
            }
            dataArr[i].x += dataArr[i].sx;
            dataArr[i].y += dataArr[i].sy;
            dataArr[i].sy += 0.02;
        }
    },1000/60);

然后加上速度，重力，摩擦力的概念就可以做出一些动画了。