html5で日食アニメーションしてみたよー(*`ω´*)

HTML

<script src="http://dl.dropbox.com/u/63305355/easeljs-0.4.2.min.js"></script>
<script src="http://dl.dropbox.com/u/63305355/tweenjs-0.2.0.min.js"></script>
<div id="wrapper">
<canvas></canvas>
</div>

CSS

html{
    min-height: 100%;
    overflow: auto;
    position:relative;
    z-index: 1;
}

body{
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    position: relative;
    z-index: 1;
}

#wrapper{
    height: auto;
    overflow: auto;
    position: fixed;
    z-index: 1;
    width: 100%;
    height:100%;
    min-height:100%;
    background:#000;
}

canvas{
    position: fixed;
    
}

JavaScript

var stage;
var h=400;
var w=600;

window.onload = function() {

    $("canvas").attr({height:h});
    $("canvas").attr({width:w});

    stage = new Stage($("canvas")[0]);
    
    for(var i=1;i<10;i++){
        sunflare(i,true);
    }
    
    var g = new Graphics();    
    g.beginFill(Graphics.getRGB(0,0,0)).drawCircle(0,0,110);
    var front = new Shape(g);
    front.x = w/2;
    front.y = h/2;
    stage.addChild(front);
    stage.update();
    
    for(var i=1;i<10;i++){
        sunflare(i,false);
    }
    
    //Tween.get(s).to({y:s.y-30*i},50000);
    
    Ticker.setFPS(60);
    Ticker.addListener(stage);
    
};

function sunflare(i,flg){
    
    var g = new Graphics();
    var rad;
    var lrad;
    var start;
    var finish;
    
    if(flg){
        rad=25;
        lrad=1000;
        start=w/2+50;
        finish = w/2-200;
    }else{
        rad=10;
        lrad=50;
        start=w/2-130;
        finish=w/2-110;
    }
    
    g.beginRadialGradientFill(
        [Graphics.getRGB(255,255,255,.5),
         Graphics.getRGB(255,200,200,.3),
         Graphics.getRGB(200,0,0,0)],
        [0,0.6,1], 0, 0, 0, 0, 0, rad*i)
        .drawCircle(start,0,lrad*i);

    var s = new Shape(g);
    s.compositeOperation ="lighter";
    s.x = start;
    s.y = h/2;        
    if(flg){
       Tween.get(s).to({x:finish},50000);
    }else{
        s.alpha=0;
        Tween.get(s).wait(7000).to({alpha:1,x:finish},50000);            
    }
        
    stage.addChild(s);
    
}