Raphaelist_vol11

Raphael de SVG ! vol11

by nekosmash

HTML

<div id="canvas"></div>

CSS

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:100%;
    background:#aaa;
}

JavaScript

window.onload = function () {
    
    //create paper
    var paper = Raphael("canvas");
           
    //最も簡単なグラデーション
    //90度の垂直方向に#FFFから#000に変化する塗を実行
    paper.rect(10,10,100,100).attr({fill:"90-#fff-#000"});
    
    //90度の垂直方向に#FFFから#000に変化する塗を実行
    //ただし、#FFFの開始地点はスタートから20%を超えた地点から
    paper.rect(120,10,100,100).attr({fill:"90-#fff:20-#000"});
    
    //90度の垂直方向に#FFFから#000に変化する塗を実行
    //#FFFの開始地点はスタートから20%を超えた地点から
    //#000の開始地点はスタートから80%を超えた地点まで
    paper.rect(230,10,100,100).attr({fill:"90-#fff:20%-#000:80%"});
    
    //45度方向に
    paper.circle(65,195,50).attr({fill:"45-#fff-#000"});
    
    //円形グラデーション
    paper.circle(175,195,50).attr({fill:"r#fff:10%-#000:50%"});
    
    //グラデーションの開始位置を調整
    paper.circle(285,195,50).attr({fill:"r(0.2,0.2)#fff-#000"});    
    
    //円形グラデーション失敗
    paper.rect(10,260,40,100).attr({fill:"r#fff-#000"});
    

    
}