Angel Fly

by ethertank

HTML

<script src="http://ghostpia.com/script/excanvas.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>
<p>クリックで再描画。</p>
<hr />
<p>参考：<br />
<a href="http://jsdo.it/5509/dRCd" title="my canvas 4 - jsdo.it - Share JavaScript, HTML5 and CSS">  my canvas 4 - jsdo.it - Share JavaScript, HTML5 and CSS</a>

CSS

#canvas{
    border:1px solid #ccc;
    outline:1px solid #333;
}

JavaScript

(function(){
function addEvent(a,b,c,d){
    if (a.addEventListener){a.addEventListener(b,c,d);}
    else if(a.attachEvent){a.attachEvent('on'+b,c);}
}//※「 addEvent(element,"name",observer,useCapture); 」
addEvent(window,"load",all,false);

function all(){
    c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    var cW = c.width, cH = c.height;
    
    addEvent(c,"click",rewrite,false);
    
    draw();
        
    function draw(){//背景のグラデーション
        ctx.globalAlpha = 1;
        ctx.globalCompositeOperation ="source-over";
        grad1 = "#900";
        grad2 = "#009";
        var lingrad = ctx.createLinearGradient(0, 0, cW, cH);
        lingrad.addColorStop(0, grad1);
        lingrad.addColorStop(1, grad2);
        ctx.fillStyle = lingrad;
        ctx.fillRect(0, 0, cW, cH);
    

        ctx.globalCompositeOperation ="lighter";
        var i=0;  
        (function(){
            //ベジェ曲線群
            ctx.globalAlpha = 0.1;
            ctx.lineWidth  = 100;
            ctx.strokeStyle = "#ffc";
            ctx.beginPath();
            ctx.moveTo(0,-550);
            ctx.bezierCurveTo(-400,400, i*80-1000,300, i*80-500,1800 );
            ctx.stroke();
            i++;
            if(i>=60){ clearTimeout("myTimer");
            } else { myTimer = setTimeout(arguments.callee, 1000 / 20); }
         })();        
    }

    function rewrite(){
        clearTimeout(myTimer);
        draw();
    }

}



})();