1 <!doctype html>
2 <html>
3 <head>
4 <title>html5 简单 旋转角度原理 时针</title>
5
6 <script type="text/javascript">
7 //====================================
8 var time = new Date();
9 var h = time.getHours();
10 var m = time.getMinutes();
11 var s = time.getSeconds();
12 var weekday={0:'星期日',1:'星期一',2:'星期二',3:'星期三',4:'星期四',5:'星期五',6:'星期六'};
13 h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置
14 //=====================================
15 var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量
16
17 function draw(){
18 var c=document.getElementById("myCanvas");
19 var ctx=c.getContext("2d");
20 ctx.clearRect(0,0,c.width,c.height);
21
22 s++;//秒针
23
24 //背景
25 ctx.fillStyle = '#999' // Make changes to the settings
26 ctx.globalAlpha = 0.8;
27
28 ctx.fillRect(0,0,c.width,c.height); // Draw a rectangle with new settings
29 //===填充(表明)原点===
30 ctx.beginPath();
31 ctx.arc(x,y,4,8,true);
32 ctx.fill();
33 ctx.closePath();
34
35 // 版权 注明
36 var grd=ctx.createLinearGradient(x,y,50,350);
37 grd.addColorStop(0,"#FF0000");
38 grd.addColorStop(0.5,"#00FF00");
39 grd.addColorStop(1,"#0000FF");
40 ctx.fillStyle=grd;
41 ctx.font = "20pt Arial";
42 ctx.fillText("html5",50,350);
43 ctx.save();
44 // 时间刻度
45 for(var i=0;i<60;i++){
46 var angle=(Math.PI*2)/60;
47 ctx.beginPath();
48 var b=i==0||i==15||i==30||i==45
49 if(i%5==0){
50 if(b){
51 ctx.fillStyle="red";
52 radius=6;
53 }else{
54 ctx.fillStyle="blue";
55 radius=4.5;
56 }
57 ctx.font="12px Arial";
58
59 ctx.fillText(i/5==0?12:i/5,x-5,y-80); //x大-右 小-左 y大小 数字刻度
60 }else{
61 ctx.fillStyle="#000";
62 radius=2;
63 }
64 if(s==i)radius=radius+1;
65 ctx.arc(x,y-100,radius,10,true);
66 ctx.fill();
67 transform(ctx,x,y,angle,true);
68 }
69 ctx.restore();
70
71 //==========================
72 sAngle=(Math.PI*2)/60*s; //秒度
73
74 ctx.save(); //时针
75 ctx.fillStyle="red";
76 // ctx.strokeStyle="red";
77 ctx.lineWidth=2;
78 transform(ctx,x,y,(Math.PI*2)/60*h,true);
79 sj(ctx,x,y,x-8,y-30,x+8,y-45);
80 ctx.restore();
81
82 ctx.save();//分针转动
83 ctx.fillStyle="blue";
84 ctx.lineWidth=2;
85 transform(ctx,x,y,(Math.PI*2)/60*m,true);
86 sj(ctx,x,y,x-10,y-50,x+10,y-65);
87 ctx.restore();
88
89 //秒针转动
90 ctx.save();
91 ctx.fillStyle="#000";
92 transform(ctx,x,y,sAngle,true);
93 sj(ctx,x,y,x-5,y-70,x+5,y-80);
94 ctx.restore();
95 //数据整理
96
97
98 if(s%60==0){sAngle=0,s=0,m++;
99
100 if(m%12==0){ //每十二分 时针旋转一次
101
102 if(m!=0)h++;
103
104 if(m%60==0)m=0;
105
106 }
107 if(h%60==0)h=0;
108 }; //*注:如果是放到外面 判断分针或时针转动 则满足条件时 都重复会运行 原因 每执行一遍 只有秒针 在时刻变动 *//
109
110 var dateString=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日 "+weekday[time.getDay()]+" h:"+time.getHours()+" m:"+m+" s:"+s;
111 document.getElementById("d").innerHTML=dateString;
112
113
114 }
115
116 //指针三角!
117 function sj(ctx,x,y,x1,y1,x2,y2){
118 //====例====
119 // ctx.beginPath();
120 // ctx.moveTo(x,y);
121 // ctx.lineTo(x,y-30);
122 // ctx.stroke();
123 // ctx.beginPath();
124 //
125 // ctx.moveTo(x-10,y-30);
126 // ctx.lineTo(x+10,y-30);
127 // ctx.lineTo(x,y-30-10);
128 // ctx.fill();
129 ctx.beginPath();
130 ctx.moveTo(x,y);
131 ctx.lineTo(x,y1);
132 ctx.stroke();
133 ctx.beginPath();
134 ctx.moveTo(x1,y1);
135 ctx.lineTo(x2,y1);
136 ctx.lineTo(x,y2);
137 ctx.fill();
138 }
139 //据坐标旋转
140 function transform(ctx,x,y,angle,b){
141 if(b){// 顺时针
142 ctx.transform(Math.cos(angle), Math.sin(angle),
143 -Math.sin(angle), Math.cos(angle),
144 x*(1-Math.cos(angle)) + x*Math.sin(angle),
145 y*(1-Math.cos(angle)) - y*Math.sin(angle))
146 }
147 }
148 //=====每秒执行============(执行事件自选)
149 window.setInterval(function(){draw()},1000);
150
151 // window.onload=function(){ //效果同上
152 // setInterval("draw()",1000);
153 // }; </script>
154
155 </head>
156 <body>
157 <center>
158 <div id="d">
159 </div>
160
161 <canvas id="myCanvas" width="400" height="400"></canvas>
162 </center>
163 </body>
164 </html>
