|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>ColorWheel</title>
<script src="http://media.hellohtml5.com/blogger/pages/jsHarmonyColorPack/raphael.min.js" type="text/javascript" charset="utf-8""></script>
<script src="http://media.hellohtml5.com/blogger/pages/jsHarmonyColorPack/raphael.colorwheel.js" type="text/javascript" charset="utf-8""></script>
<script src="http://media.hellohtml5.com/blogger/pages/jsHarmonyColorPack/raphael.sunflower.js" type="text/javascript" charset="utf-8""></script>
<script src="http://media.hellohtml5.com/blogger/pages/jsHarmonyColorPack/raphael.listcolor.js" type="text/javascript" charset="utf-8""></script>
<script>
window.onload=function(){var c=20,marginLeft=80,innerMarginTop=25,cwWidth=300,cwTitleHeight=40,RGBModelFlowerWidth=200,textBackgroundColor="#d0d0d0",textColor="#2e2e2e",textSizeTitle=22;var d=[],harmonyColorFlowerTitle=["Monochromatic","Complementary","Split-complementary","Analogous","Accented Analogic","Triad","Tetrad","Square"];var e=[];var f=Raphael(marginLeft,c,cwWidth,cwTitleHeight);f.rect(0,0,cwWidth,cwTitleHeight,cwTitleHeight/2,cwTitleHeight/2).attr({fill:textBackgroundColor,stroke:"none"});f.text().attr({text:"ColorWheel",x:cwWidth/2,y:cwTitleHeight/2,"font-size":textSizeTitle,"font-color":textColor});var g=Raphael(cwWidth+marginLeft*2,c,RGBModelFlowerWidth*3+marginLeft*2,cwTitleHeight);g.rect(0,0,RGBModelFlowerWidth*3+marginLeft*2,cwTitleHeight,cwTitleHeight/2,cwTitleHeight/2).attr({fill:textBackgroundColor,stroke:"none"});g.text().attr({text:"RGB Color Model",x:(RGBModelFlowerWidth*3+marginLeft*2)/2,y:cwTitleHeight/2,"font-size":textSizeTitle,"font-color":textColor});c+=cwTitleHeight;var k,cw=Raphael.colorwheel(marginLeft,c,cwWidth);cw.onchange=function(a){if(a!=k){for(var i=0;i<d.length;i++){d[i].harmoneyColor(a,harmonyColorFlowerTitle[i].replace(/\W+/ig,"").toLowerCase())}for(var b=0;b<e.length;b++){e[b].colors(d[b].harmoneyColor())}k=a}};var l={"0":"rgb(255,0,0)","4":"rgb(0,255,0)","8":"rgb(0,0,255)",text:"Primary"},RGBColorModelSecondary={"2":"rgb(255,255,0)","6":"rgb(0,255,255)","10":"rgb(255,0,255)",text:"Secondary"},RGBColorModelTertiary={"1":"rgb(255,128,0)","3":"rgb(128,255,0)","5":"rgb(0,255,128)","7":"rgb(0,128,255)","9":"rgb(128,0,255)","11":"rgb(255,0,128)",text:"Tertiary"};var m=[l,RGBColorModelSecondary,RGBColorModelTertiary];for(var i=0;i<m.length;i++){var n=RGBModelFlowerWidth;var o=Raphael.sunflower(cwWidth+marginLeft*2+(n+marginLeft)*i,c,n,m[i]);var h=cwWidth-RGBModelFlowerWidth;var r=Raphael(cwWidth+marginLeft*2+(n+marginLeft)*i,n+c,n,h);r.rect(0,innerMarginTop,n,h-innerMarginTop*2,(h-innerMarginTop*2)/2,(h-innerMarginTop*2)/2).attr({fill:textBackgroundColor,stroke:"none"});var p=r.text();p.attr({text:m[i].text,"font-size":textSizeTitle,fill:textColor});p.attr({x:n/2,y:h/2});o.onclick=function(a){cw.color(a)}}c+=cwTitleHeight;c+=cwWidth;var q=cwWidth+marginLeft+RGBModelFlowerWidth*3+marginLeft*2;var s=Raphael(marginLeft,c,cwWidth+marginLeft*2+RGBModelFlowerWidth*3+marginLeft*2,cwTitleHeight);s.rect(0,0,q,cwTitleHeight,cwTitleHeight/2,cwTitleHeight/2).attr({fill:textBackgroundColor,stroke:"none"});s.text().attr({text:"Color Harmonies",x:q/2,y:cwTitleHeight/2,"font-size":textSizeTitle,"font-color":textColor});c+=cwTitleHeight;var t=marginLeft/8;var u=8;var v=(q-(u-1)*t)/u;var w=20;var x=w/2;for(var j=0;j<u;j++){var y=Raphael.sunflower(marginLeft+(t+v)*j,c,v);var z=Raphael(marginLeft+(t+v)*j,c+v,v,w+x);z.rect(0,x,v,w,w/2,w/2).attr({fill:textBackgroundColor,stroke:"none"});var A=z.text();A.attr({text:harmonyColorFlowerTitle[j],x:v/2,y:w/2+x,"font-size":12,"font-color":textColor});y.harmoneyColor(cw.color(),harmonyColorFlowerTitle[j].replace(/\W+/ig,"").toLowerCase());d.push(y)}c+=v;c+=x;c+=w;c+=10;for(var B=0;B<d.length;B++){var C=Raphael.listcolor(marginLeft+(t+v)*B,c,v,d[B].harmoneyColor());e.push(C)}};
</script>
<style>
html,body{background:#efefef;color:#666;margin:0;padding:0;text-align:center;font-family:Arial;}
</style>
</head>
<body>
</body>
</html> |
注册 登录
