html5 简单 旋转角度原理 时针

html5 简单 旋转角度原理 时针

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.οnlοad=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>

转载于:https://www.cnblogs.com/TaoLiQ/archive/2011/07/08/2101395.html