重拾Canvas动画（未完成）

学习前端到现在已经接触了四种动画的形式，他们分别是：
1.CSS3
2.JS
3.SVG
4.Canvas

CSS3：功能强大，使用Animation、Transition、Transform可以完成许多变换动画，其中的Preserve-3d也能制作3D动画

JS：主要通过抓取元素进行定时的移位操作来完成动画

SVG：最擅长制作线条动画，比如用CSS3你很难完成一个画一个圆圈的动画，而使用SVG的Stroke-dashoffset、Stroke-dasharray、Stroke-opacity并结合CSS3可以快速的完成线条动画，画圆Loading动画变得很简单

Canvas：是Html5的新增元素，Canvas作为一个容器，承载区域内的像素，使用 JS 可以对其进行像素操作，Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面就开始Canvas的学习

实例：简单的随机粒子动画

将会用到：
1.面向对象的思想
2.JS内置Math对象
3.碰撞判断
4.RequestAnimationFrame回调函数

window.onload=function(){
    var cv = document.getElementById('canvas');
    var ct = cv.getContext('2d');
    var cArray = new Array();
    var cx = null;
    var cy = null;
    var cr = null;
    var rgba = null;
    var xs = null;//x-axis speed
    var ys = null;//y-axis speed
    var od = 0.004 //opacity descent
    var obj = null;
    setInterval(function(){
        //生成小球超过100个，清空前50个
        if(cArray.length>=100){
            var newArray = cArray.slice(50,100);
            cArray = null;
            cArray = newArray;
        }
        //随机生成小球的参数
        cx = 250+Math.floor(-50+Math.random()*101);
        cy = 250+Math.floor(-50+Math.random()*101);
        cr = 5+Math.floor(-2+Math.random()*11);
        rgba = "rgba("+Math.floor(Math.random()*256)
        +","+Math.floor(Math.random()*256)
        +","+Math.floor(Math.random()*256);
        xs = -2+Math.random()*4;
        ys = -2+Math.random()*4;
        if(xs!=0||ys!=0){
            obj = {
                "x": cx,
                "y": cy,
                "r": cr,
                "rgba":rgba,
                "xs":xs,
                "ys":ys,
                "op":1//opacity
            }
            cArray.push(obj);   
        }
    },100)
    function draw(obj){
        //画圆涂色
        ct.beginPath();
        ct.fillStyle=obj.rgba+","+obj.op+")";
        ct.arc(obj.x,obj.y,obj.r,0,2*Math.PI);
        ct.fill();
        ct.closePath();
    }
    function modify(obj){
        //触碰边界设置速度为反方向
        if((obj.x+obj.r>=cv.width)||(obj.x-obj.r<=0)){
            obj.xs *= -1;
        }
        if((obj.y+obj.r>=cv.height)||(obj.y-obj.r<=0)){
            obj.ys *= -1;
        }
        obj.x+=obj.xs;
        obj.y+=obj.ys;
        //不透明度递减
        obj.op-=od;
    }
    function animation(){
        ct.clearRect(0,0,cv.width,cv.height);
        for(var i=0;i<cArray.length;i++){
            modify(cArray[i]);
            draw(cArray[i]);
        }
        window.requestAnimationFrame(animation);
    }
    window.requestAnimationFrame(animation);
}

实例2：动态绘制饼状图

var cv = document.getElementById("canvas");
    var ct = cv.getContext("2d");
    var cw = cv.width;
    var ch = cv.height;
    var setArr = [
        {
            scale:0.2,
            color:"red"
        },
        {
            scale:0.1,
            color:"green"
        },
        {
            scale:0.3,
            color:"yellow"
        },
        {
            scale:0.15,
            color:"purple"
        },
        {
            scale:0.25,
            color:"orange"
        }
    ]
    function draw(startRadian,endRadian,color){
        ct.beginPath();
        ct.moveTo(cw/2,ch/2);
        ct.lineTo(cw/2+150*Math.cos(startRadian),ch/2+150*Math.sin(startRadian));
        ct.arc(cw/2,ch/2,150,startRadian,endRadian);
        ct.lineTo(cw/2,ch/2);
        ct.fillStyle=color;
        ct.fill();
        ct.closePath();
        ct.beginPath();
        ct.arc(cw/2,ch/2,100,0,2*Math.PI);
        ct.lineTo(cw/2,ch/2);
        ct.fillStyle="white";
        ct.fill();
        ct.closePath();
    }
//  draw(0,30/180*Math.PI,"red");
    var speed = 2/180*Math.PI;
    var color = null;
    var section = new Array();
    var sum_scale = 0;
    var sum_radian = 0;
    for(var i=0;i<setArr.length;i++){
        sum_scale += setArr[i].scale*2*Math.PI;
        var obj ={
            sumScale : sum_scale,
            color : setArr[i].color
        }
        section.push(obj);
    }
    var startRadian = 0;
    var endRadian = 0;
    var stop = null;
    function animation(){
        console.log(stop)
        endRadian += speed;
        if(endRadian>=2*Math.PI){
            window.cancelAnimationFrame(stop);
            console.log("stop")
        }
        for(var i = 0;i<section.length;i++){
            if(endRadian<=section[i].sumScale){
                color = section[i].color;
                draw(startRadian,endRadian,color);
                break;
            }
        }
//      draw(startRadian,endRadian,"red");
        startRadian = endRadian - 0.01;
        stop = window.requestAnimationFrame(animation);
    }
    stop = window.requestAnimationFrame(animation);
}