五行八卦
程序代码：<html>
<head>
<meta charset=utf-8>
</head>
<body>
<canvas id=0></canvas>
</body>
<script>
$=function(b){return document.getElementById(b)};
Array.prototype.clock=function(n){
var len=this.length;
var n=n<0?len+n:n;
var a=this.slice(0,n);
var b=this.slice(n);
var c=b.concat(a);
for(var i=0;i<len;i++){
this[i]=c[i];
};
};
R=250
cnv=$(0);
cnv.width=2*R;
cnv.height=2*R;
circle={
n:0,
diff:0,
data:['青龙,朱雀,白虎,玄武'.split(','),'木,火,土,金,水'.split(','),'乾,巽,坎,艮,坤,震,离,兑'.split(',').reverse()],
size:[30,30,30],
color:'red',
R:[140,180,220],
ringColor:['red','black',0],
run:function(){
cnv.height=2*R;
var cxt=cnv.getContext('2d');
cxt.textAlign='center';
for(var step=0;step<this.data.length;step++){
var data=this.data[step];
cxt.translate(R,R);
cxt.fillStyle=step==this.n?this.color:'black';
var r=this.R[step];
var f=this.size[step];
if(this.ringColor[step]){
cxt.strokeStyle=this.ringColor[step];
cxt.beginPath();
cxt.arc(0,0,r-f,0,360,false);
cxt.stroke();
}
cxt.font=f+'px Arial';
var len=data.length;
cxt.rotate(this.diff);
for(var i=0;i<len;i++){
cxt.fillText(data[i],0,r);
cxt.rotate(2*Math.PI/len);
};
cxt.rotate(-this.diff);
cxt.translate(-R,-R);
};
}
};
circle.run();
cnv.addEventListener('click', function(e) {
var cRect=cnv.getBoundingClientRect();
var X=Math.round(e.clientX-cRect.left);
var Y=Math.round(e.clientY-cRect.top);
var d=Math.sqrt((X-R)**2+(Y-R)**2);
if(d<100){
circle.data[circle.n].clock((-1)**(X<R));
}else{
for(var i=0;i<circle.data.length;i++){
if(d<circle.R[i]+15){
circle.color[circle.n]='black';
circle.n=i;
circle.color[circle.n]='red';
break;
};
};
};
circle.run();
});
</script>
</html>
