source: trunk/examples/script/context2d/scripts/clock.js@ 1077

Last change on this file since 1077 was 2, checked in by Dmitry A. Kuminov, 16 years ago

Initially imported qt-all-opensource-src-4.5.1 from Trolltech.

File size: 1.9 KB
Line 
1function init(){
2 clock();
3 setInterval('clock()',1000);
4}
5function clock(){
6 var now = new Date();
7 var ctx = document.getElementById('tutorial').getContext('2d');
8 ctx.save();
9 ctx.clearRect(0,0,150,150);
10 ctx.translate(75,75);
11 ctx.scale(0.4,0.4);
12 ctx.rotate(-Math.PI/2);
13 ctx.strokeStyle = "black";
14 ctx.fillStyle = "white";
15 ctx.lineWidth = 8;
16 ctx.lineCap = "round";
17
18 // Hour marks
19 ctx.save();
20 ctx.beginPath();
21 for (i=0;i<12;i++){
22 ctx.rotate(Math.PI/6);
23 ctx.moveTo(100,0);
24 ctx.lineTo(120,0);
25 }
26 ctx.stroke();
27 ctx.restore();
28
29 // Minute marks
30 ctx.save();
31 ctx.lineWidth = 5;
32 ctx.beginPath();
33 for (i=0;i<60;i++){
34 if (i%5!=0) {
35 ctx.moveTo(117,0);
36 ctx.lineTo(120,0);
37 }
38 ctx.rotate(Math.PI/30);
39 }
40 ctx.stroke();
41 ctx.restore();
42
43 var sec = now.getSeconds();
44 var min = now.getMinutes();
45 var hr = now.getHours();
46 hr = hr>=12 ? hr-12 : hr;
47
48 ctx.fillStyle = "black";
49
50 // write Hours
51 ctx.save();
52 ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
53 ctx.lineWidth = 14;
54 ctx.beginPath();
55 ctx.moveTo(-20,0);
56 ctx.lineTo(80,0);
57 ctx.stroke();
58 ctx.restore();
59
60 // write Minutes
61 ctx.save();
62 ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
63 ctx.lineWidth = 10;
64 ctx.beginPath();
65 ctx.moveTo(-28,0);
66 ctx.lineTo(112,0);
67 ctx.stroke();
68 ctx.restore();
69
70 // Write seconds
71 ctx.save();
72 ctx.rotate(sec * Math.PI/30);
73 ctx.strokeStyle = "#D40000";
74 ctx.fillStyle = "#D40000";
75 ctx.lineWidth = 6;
76 ctx.beginPath();
77 ctx.moveTo(-30,0);
78 ctx.lineTo(83,0);
79 ctx.stroke();
80 ctx.beginPath();
81 ctx.arc(0,0,10,0,Math.PI*2,true);
82 ctx.fill();
83 ctx.beginPath();
84 ctx.arc(95,0,10,0,Math.PI*2,true);
85 ctx.stroke();
86 ctx.fillStyle = "#555";
87 ctx.arc(0,0,3,0,Math.PI*2,true);
88 ctx.fill();
89 ctx.restore();
90
91 ctx.beginPath();
92 ctx.lineWidth = 14;
93 ctx.strokeStyle = '#325FA2';
94 ctx.arc(0,0,142,0,Math.PI*2,true);
95 ctx.stroke();
96
97 ctx.restore();
98}
99init();
Note: See TracBrowser for help on using the repository browser.