五行八卦 - 编程论坛

程序代码：

<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>