-
Notifications
You must be signed in to change notification settings - Fork 34
/
canvas-clock.html
121 lines (79 loc) · 2.18 KB
/
canvas-clock.html
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas画时钟</title>
<style type="text/css">
body{background:#000;}
#c1{background:#fff;}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var oC1=document.getElementById('c1')
var oGC=oC1.getContext('2d');
function toDraw(){
var x=200;
var y=200;
var r=150;
oGC.clearRect(0,0,oC1.width,oC1.height);
var iDate=new Date();
var iHou=iDate.getHours();
var iMin=iDate.getMinutes();
var iSce=iDate.getSeconds();
var oHoursValue = (-90 + iHou*30 + iMin/2) * Math.PI/180;
var oMinValue = (-90 + iMin*6) * Math.PI/180;
var oSenValue = (-90 + iSce*6) * Math.PI/180;
oGC.beginPath();
for(var i=0;i<60;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle='#fff';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth=3;
oGC.beginPath();
for(var i=0;i<12;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle = '#fff';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth = 5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*9/20,oHoursValue,oHoursValue,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth = 3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*13/20,oMinValue,oMinValue,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth = 1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,oSenValue,oSenValue,false);
oGC.closePath();
oGC.stroke();
}
setInterval(toDraw,1000);
toDraw();
}
</script>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>