"Angel Wing" bezierCurveTo() & createLinearGradient()

また偶発性に頼ってしまう。でも綺麗。

HTML

<canvas id="canvas" width="400" height="400"></canvas>

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;

    draw();
    
    function draw(){
        //背景のグラデーション
        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";
        ctx.globalAlpha = 0.1;
        ctx.lineWidth  = 100;
        ctx.strokeStyle = "#ffc";
        for(i=0;i<40;i++){
            ctx.beginPath();
            ctx.moveTo(0,-550);
            ctx.bezierCurveTo(-400,400, i*80-1000,300, i*80-500,1800 );
            ctx.stroke();
        };
    }
}


})();