发个例子 - 编程论坛

程序代码：

<html>
<head>
<meta charset=utf-8>
<script>
$=function(b){return document.getElementById(b)};

setCanvas={
    id:0,
    R:250,
    run:function(){
        var cnv=$(this.id);
        cnv.width=2*this.R;
        cnv.height=2*this.R;
        var cxt=cnv.getContext('2d');
        cxt.clearRect(0,0,cnv.width,cnv.height);
        return cnv;
    }
};

circle={
    diff:0,
    data:'木,火,土,金,水',
    size:40,
    color:'black',
    R:800,
    circle:true,
    circleColor:'black',
    run:function(cnv){
        var data=this.data.split(',');
        var cxt=cnv.getContext('2d');
        cxt.fillStyle=this.color;
        cxt.textAlign='center';
        cxt.translate(cnv.width/2,cnv.height/2);
        var r=this.R;
        var f=this.size;
        if(this.circle){
            cxt.strokeStyle=this.circleColor;
            cxt.beginPath();
            cxt.arc(0,0,r-f/4,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(-cnv.width/2,-cnv.height/2);
    }
};

</script>
</head>
<body>
<canvas id=0></canvas>
</div>
<div>
</body>
<script>
mycanvas=({__proto__:setCanvas}).run();
({data:'手太阴,手阳明,足阳明,足太阴,手少阴,手太阳,足太阳,足少阴,手厥阴,手少阳,足少阳,足厥阴',circle:false,R:220,size:30,__proto__:circle}).run(mycanvas);

({data:'肺,大肠,胃,脾,心,小肠,膀胱,肾,心包,三焦,胆,肝',circle:false,R:202,size:17,__proto__:circle}).run(mycanvas);
({data:'中府-少商,商阳-迎香,承泣-历兑,隐白-大包,极泉-少冲,少泽-听宫,睛明-至阴,涌泉-俞府,天池-中冲,关冲-丝竹空,瞳子髎-足窍阴,大敦-期门',R:185,size:17,__proto__:circle}).run(mycanvas);

({data:'寅,卯,辰,巳,午,未,申,酉,戌,亥,子,丑',circle:false,circle:false,R:150,size:25,__proto__:circle}).run(mycanvas);
({data:'辛,庚,戊,己,丁,丙,壬,癸,阴,阳,甲,乙',circle:false,circle:false,R:125,size:25,__proto__:circle}).run(mycanvas);

</script>
</html>

只有本站会员才能查看附件，请登录