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 >