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
|
<!DOCTYPE HTML>
<
html
>
<
body
>
<
canvas
id
=
"myCanvas"
width
=
"400"
height
=
"400"
style
=
"border:1px solid"
></
canvas
>
<
script
type
=
"text/javascript"
>
// get the canvas
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
function showClock(){
ctx.save();
ctx.save();
ctx.save();
ctx.save();
ctx.save();
ctx.save();
ctx.save();
ctx.clearRect(0,0,400,400);
// create the clock border
ctx.restore();
ctx.beginPath();
ctx.strokeStyle="pink";
ctx.lineWidth=10;
ctx.arc(200,200,150,0,Math.PI*2,true);
ctx.stroke();
// create the hour icon
ctx.restore();
ctx.lineWidth=8;
ctx.strokeStyle="blue";
ctx.translate(200,200);
for(var i=0;i<
12
;i++){
ctx.beginPath();
ctx.moveTo(135,0);
ctx.lineTo(150,0);
ctx.rotate(Math.PI/6);
ctx.stroke();
}
// create the minute icon
ctx.restore();
ctx.lineWidth
=
4
;
ctx.strokeStyle
=
"blue"
;
ctx.translate(200,200);
for(var
i
=
0
;i<60;i++){
ctx.beginPath();
ctx.moveTo(145,0);
ctx.lineTo(150,0);
ctx.rotate(Math.PI/30);
ctx.stroke();
}
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
hour = hour>=12?hour-12:hour;
// create the hour hand
ctx.restore();
ctx.lineWidth = 14;
ctx.strokeStyle="pink";
ctx.translate(200,200);
ctx.rotate(hour*(Math.PI/6) + (Math.PI/360)*minute + (Math.PI/21600)*second-Math.PI/2);
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(90,0);
ctx.stroke();
// create the minute hand
ctx.restore();
ctx.lineWidth = 10;
ctx.strokeStyle="pink";
ctx.translate(200,200);
ctx.rotate((Math.PI/30)*minute + (Math.PI/1800)*second-Math.PI/2);
ctx.beginPath();
ctx.moveTo(-30,0);
ctx.lineTo(125,0);
ctx.stroke();
// create the second hand
ctx.restore();
ctx.lineWidth = 4;
ctx.strokeStyle="pink";
ctx.translate(200,200);
ctx.rotate( (Math.PI/30)*second-Math.PI/2);
ctx.beginPath();
ctx.moveTo(-35,0);
ctx.lineTo(135,0);
ctx.stroke();
ctx.restore();
setTimeout(showClock,1000);
}
showClock();
</
script
>
</
body
>
</
html
>
|
本文转自 antlove 51CTO博客,原文链接:http://blog.51cto.com/antlove/1663239