发个例子
程序代码：<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>
