console
<html>
<head>
<meta charset=utf-8>
<script>
$=function(b){return document.getElementById(b)};
sk={
diff:0,
point:5,
linewidth:3,
color:['green','red'],
R:100,
run:function(cnv){
var cxt=cnv.getContext("2d");
cxt.lineWidth=this.linewidth;
cxt.lineJoin="round";
cxt.translate(cnv.width/2,cnv.height/2);
var r=this.R;
var n=2*Math.PI/this.point;
cxt.rotate(this.diff);
cxt.beginPath();
for(var i=0;i<this.point;i++){
if(i==0){
cxt.moveTo(0,-r);
}else{
cxt.lineTo(r*Math.sin(i*n),-r*Math.cos(i*n));
};
};
cxt.closePath();
cxt.strokeStyle=this.color[0];
cxt.stroke();
cxt.beginPath();
for(var i=0;i<this.point;i++){
if(i==0){
cxt.moveTo(0,-r);
}else{
cxt.lineTo(r*Math.sin(2*i*n),-r*Math.cos(2*i*n));
};
};
cxt.closePath();
cxt.strokeStyle=this.color[1];
cxt.stroke();
cxt.rotate(-this.diff);
cxt.translate(-cnv.width/2,-cnv.height/2);
}
};
position=function(){
var d=new Date(1984,0,21,5,5,2);
var start=d.getTime()/1000;
var wholeyear=31556926;
var now=(new Date()).getTime()/1000;
var diff=now-start;
var yearnumber=parseInt(diff/wholeyear);
var mydiff=diff/wholeyear-yearnumber;
var yearRad=yearnumber/60*2*Math.PI;
var jieqiposition=mydiff*2*Math.PI;
var yunnumber=7-2*yearnumber;
var qinumber=3-2*yearnumber;
var startday=(new Date(2018,3,2,0,0,0)).getTime()/1000;
var daynumber=parseInt((now-startday)/60/60/24);
var dayRad=daynumber/60*2*Math.PI;
var qi=parseInt(mydiff*6);
var yun=parseInt(mydiff*5);
return [dayRad,yearRad,jieqiposition,qinumber,yunnumber,qi,yun,daynumber];
};
setCanvas={
id:0,
R:1000,
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={
user:[],
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);
if(this.user.length==0){
for(var i=0;i<len;i++){
cxt.fillText(data[i],0,-r);
cxt.rotate(2*Math.PI/len);
};
}else{
console.log('hello')
for(var i=0;i<len;i++){
cxt.fillText(data[i],0,-r);
cxt.rotate(this.user[i]);
};
};
cxt.rotate(-this.diff);
cxt.translate(-cnv.width/2,-cnv.height/2);
}
};
pointer={
color:'red',
R:600,
size:60,
run:function(cnv){
var date=new Date();
var cxt=cnv.getContext("2d");
cxt.font=this.size+"px Arial";
cxt.translate(cnv.width/2,cnv.height/2);
var n=(date.getHours()*60+date.getMinutes())/24/60;
cxt.rotate(2*n*Math.PI);
cxt.fillStyle=this.color;
cxt.fillText('^',0,-this.R);
cxt.rotate(-2*n*Math.PI);
cxt.translate(-cnv.width/2,-cnv.height/2);
}
};
</script>
</head>
<body>
<canvas id=0></canvas>
<div>
</body>
<script>
(function(){
var mycanvas=({id:0,R:880,__proto__:setCanvas}).run();
var k=position();
({data:'阳土,阴金,阳水,阴木,阳火,阴土,阳金,阴水,阳木,阴火,阳土,阴金,阳水,阴木,阳火,阴土,阳金,阴水,阳木,阴火,阳土,阴金,阳水,阴木,阳火,阴土,阳金,阴水,阳木,阴火,阳土,阴金,阳水,阴木,阳火,阴土,阳金,阴水,阳木,阴火,阳土,阴金,阳水,阴木,阳火,阴土,阳金,阴水,阳木,阴火,阳土,阴金,阳水,阴木,阳火,阴土,阳金,阴水,阳木,阴火',diff:-k[1],color:'red',R:850,size:28,__proto__:circle}).run(mycanvas);
({data:'少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴',diff:-k[1],R:815,size:28,circle:false,__proto__:circle}).run(mycanvas);
({data:'君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木',diff:-k[1],R:785,size:28,__proto__:circle}).run(mycanvas);
({data:'阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳,阳明,太阳,厥阴,少阴,太阴,少阳',diff:-k[1],color:'red',R:750,size:28,circle:false,__proto__:circle}).run(mycanvas);
({data:'燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火,燥金,寒水,风木,君火,湿土,相火',diff:-k[1],color:'red',R:720,size:28,__proto__:circle}).run(mycanvas);
({data:'海中金,炉中火,大林木,路旁土,剑锋金,山头火,涧下水,城头土,白蜡金,杨柳木,泉中水,屋上土,霹雳火,松柏木,长流水,沙中金,山下火,平地木,壁上土,金箔金,覆灯火,天河水,大驿土,钗钏金,桑柘木,大溪水,沙中土,天上火,石榴木,大海水',diff:-k[1],color:'blue',circle:false,diff:Math.PI/60,R:685,size:30,circleColor:'red',__proto__:circle}).run(mycanvas);
({data:'0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59',diff:-k[1],color:'red',R:665,size:20,circleColor:'red',__proto__:circle}).run(mycanvas);
({data:'甲,乙,丙,丁,戊,己,庚,辛,壬,癸,甲,乙,丙,丁,戊,己,庚,辛,壬,癸,甲,乙,丙,丁,戊,己,庚,辛,壬,癸,甲,乙,丙,丁,戊,己,庚,辛,壬,癸,甲,乙,丙,丁,戊,己,庚,辛,壬,癸,甲,乙,丙,丁,戊,己,庚,辛,壬,癸',diff:-k[1],R:620,size:40,circle:false,__proto__:circle}).run(mycanvas);
({data:'子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥,子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥,子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥,子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥,子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥',diff:-k[1],R:570,size:40,__proto__:circle}).run(mycanvas);
({data:'.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.',diff:-k[2],user:[0.258106234,0.255051129,0.256730999,0.258608383,0.260878408,0.263058038,0.2653643,0.267233123,0.268968544,0.269967466,0.270641843,0.270449505,0.269873885,0.268531503,0.266897029,0.264785892,0.262590135,0.260285466,0.258155015,0.256248362,0.254750875,0.253704764,0.24903629,0.253268121],R:445,color:'red',size:30,circle:false,__proto__:circle}).run(mycanvas);
({data:'大寒,立春,雨水,惊蛰,春分,清明,谷雨,立夏,小满,芒种,夏至,小暑,大暑,立秋,处暑,白露,秋分,寒露,霜降,立冬,小雪,大雪,冬至,小寒',diff:-k[2],user:[0.258106234,0.255051129,0.256730999,0.258608383,0.260878408,0.263058038,0.2653643,0.267233123,0.268968544,0.269967466,0.270641843,0.270449505,0.269873885,0.268531503,0.266897029,0.264785892,0.262590135,0.260285466,0.258155015,0.256248362,0.254750875,0.253704764,0.24903629,0.253268121],R:430,color:'blue',size:20,__proto__:circle}).run(mycanvas);
({data:'少角木,太徵火,少宫土,太商金,少羽水',diff:-(k[6]-k[4])*2*Math.PI/5,R:400,size:20,__proto__:circle}).run(mycanvas);
({data:'少角木,太徵火,少宫土,太商金,少羽水',diff:-k[6]*2*Math.PI/5,R:370,color:'blue',size:20,__proto__:circle}).run(mycanvas);
({data:'厥阴风木,少阴君火,太阴湿土,少阳相火,阳明燥金,太阳寒水',diff:-(k[5]-k[3])*2*Math.PI/6,R:330,size:20,__proto__:circle}).run(mycanvas);
({data:'厥阴风木,少阴君火,少阳相火,太阴湿土,阳明燥金,太阳寒水',diff:-k[5]*2*Math.PI/6,color:'blue',R:300,size:20,__proto__:circle}).run(mycanvas);
({color:'red',size:45,R:510,run:function(cnv){
var cxt=cnv.getContext("2d");
cxt.font=this.size+"px Arial";
cxt.translate(cnv.width/2,cnv.height/2);
cxt.lineWidth=.2;
cxt.beginPath();
cxt.moveTo(0,880);
cxt.lineTo(0,-880);
cxt.closePath();
cxt.strokeStyle='red';
cxt.stroke();
var gan='甲,乙,丙,丁,戊,己,庚,辛,壬,癸'.split(',');
var zhi='子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥'.split(',');
var n=k[7];
cxt.fillText(gan[n%10]+zhi[n%12]+'日',0,0);
cxt.translate(-cnv.width/2,-cnv.height/2);
},__proto__:pointer}).run(mycanvas);
({data:'木,火,土,金,水',R:260,size:30,circle:false,__proto__:circle}).run(mycanvas);
({R:250,__proto__:sk}).run(mycanvas);
mycanvas.onclick=arguments.callee;
})();
</script>
</html>