Raphaelist_vol10

Raphael de SVG ! vol10

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");
    paper.rect(60,30,80,20,10).attr({fill:"red"});
    
    //誤り、だけど色が塗られる
    paper.text(100,20,'くまもん').attr({fill:"1"});
    
    //カラーコードによる指定
    paper.text(100,39,'KUMAMON').attr({fill:"#FFF"});
    paper.rect(60,60,80,20,10).attr({fill:"#FF0000"});
    
    //RGB色空間
    paper.rect(60,90,80,20,10).attr({fill:"rgb(255, 0, 0)"});
    paper.rect(60,120,80,20,10).attr({fill:"rgb(100%, 0, 0)"});
    //塗りの透明度指定もできる
    paper.rect(60,150,80,20,10).attr({fill:"rgba(255, 0, 0, 0.5)"});
    
    //hsb色空間やhsl色空間も設定可能
    paper.rect(60,180,80,20,10).attr({fill:"hsb(1, 1, 1)"});
    paper.rect(60,210,80,20,10).attr({fill:"hsba(1, 1, 1, 0.5)"});
    
}