canvas 动画

1.随机产生形状，做360度运转，带有一个开始开始按钮一个停止按钮

 var canvas=$('.mycanvas');
     canvas.attr("width",500);//$(window).get(0).innerWidth
    canvas.attr("height",500);//$(window).get(0).innerHeight
 var context=canvas.get(0).getContext('2d');

 

 var startbtn=$('#started'),stopbtn=$("#stoped"),palyAnimation = true;
     startbtn.hide();
    startbtn.click(function(){
        $(this).hide();
        stopbtn.show();
        palyAnimation = true;
        animate();
    })
    stopbtn.click(function(){
        $(this).hide();
        startbtn.show();
        palyAnimation = false;
    })
      var Shape = function(x,y,width,height){
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.radius = Math.random()*30;
        this.angle = 0;
        }
    var shapes = new Array();
    for(var i= 0; i< 10; i++){
        var x = Math.random()*250,y = Math.random()*250,width = height =Math.random()*50;
        shapes.push(new Shape(x,y,width,height));
        }
    
    /*shapes.push(new Shape(50,50,10,10));
    shapes.push(new Shape(100,100,10,10));
    shapes.push(new Shape(150,150,10,10));*/
    function animate(){
        context.clearRect(0,0,500,500);
        var shapeslength = shapes.length;
        for(var i=0;i< shapeslength;i++){
            var tmpShape = shapes[i];
                x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
                y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
                
                tmpShape.angle += 5;
                if(tmpShape.angle > 360){
                    tmpShape.angle = 0;
                    };
                context.fillStyle ="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";//随机颜色
                context.fillRect(x,y,tmpShape.width,tmpShape.height);
            };
            if(palyAnimation){ setTimeout(animate,33)};
        }
     animate();

2.随机生成的形状，左右运动，遇边界反弹

var startbtn=$('#started'),stopbtn=$("#stoped"),palyAnimation = true;
     startbtn.hide();
    startbtn.click(function(){
        $(this).hide();
        stopbtn.show();
        palyAnimation = true;
        animate();
    })
    stopbtn.click(function(){
        $(this).hide();
        startbtn.show();
        palyAnimation = false;
    })
      var Shape = function(x,y,width,height){
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.radius = Math.random()*30;
        this.angle = 0;
        this.reverseX = false;
        this.reverseY = false;
        }
    var shapes = new Array();
    for(var i= 0; i< 10; i++){
        var x = Math.random()*250,y = Math.random()*250,width = height =Math.random()*50;
        shapes.push(new Shape(x,y,width,height));
        }

    function animate(){
        context.clearRect(0,0,500,500);
        var shapeslength = shapes.length;
        for(var i=0;i< shapeslength;i++){
            var tmpShape = shapes[i];
                //x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
                //y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
                if(tmpShape.x < 0){
                    tmpShape.reverseX =false;
                    }else if(tmpShape.x + tmpShape.width > 500){
                    tmpShape.reverseX = true;    
                    }
                if(tmpShape.y < 0){
                    tmpShape.reverseY =false;
                    }else if(tmpShape.y + tmpShape.height > 500){
                    tmpShape.reverseY = true;    
                    }
                if(!tmpShape.reverseX){
                    tmpShape.x +=2;
                    } else{
                    tmpShape.x -=2;    
                    }
                if(!tmpShape.reverseY){
                    tmpShape.y +=2;
                    } else{
                    tmpShape.y -=2;    
                    }
                        
                context.fillRect(tmpShape.x,tmpShape.y,tmpShape.width,tmpShape.height);
            };
            if(palyAnimation){ setTimeout(animate,33)};
        }
     animate();