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
| var canvas=document.getElementById("canvas");
var rc = 100; // радиус круга
var rcc = 120; // радиус для циферблата
var oneClock=Math.PI/6; // 1 час
var oneMin=Math.PI/30; // 1 минута
canvas.width=300;
canvas.height=300;
var context=canvas.getContext("2d");
function myClock(){
// рисуем статичные часы
context.clearRect(0,0,300,300);
context.beginPath();
context.arc(150,150,rc,0,Math.PI*2);
context.stroke();
context.beginPath();
context.arc(150,150,7,0, Math.PI*2);
context.fill();
// рисуем статичный циферблат
context.beginPath();
function angle(clock,oneClock){
var r = 3*Math.PI/2+clock*oneClock;
if (r<0) r+=2*Math.PI;
return r;
}
context.font=" 20px Arial";
for(var i=1;i<=12;i++){
context.fillText(i,Math.cos(angle(i,oneClock)) * rcc + 143,Math.sin(angle(i,oneClock)) * rcc + 155);
context.moveTo(Math.cos(angle(i,oneClock)) * (rc-3) + 150,Math.sin(angle(i,oneClock)) *(rc-3) + 150);
context.lineTo(Math.cos(angle(i,oneClock)) * rc + 150,Math.sin(angle(i,oneClock)) * rc + 150);
}
context.stroke();
// перемещение стрелок
function drawClock(clock){
context.beginPath();
context.lineWidth=3;
context.moveTo(150,150);
context.lineTo(Math.cos(angle(clock,oneClock)) * 50 + 150,Math.sin(angle(clock,oneClock)) * 50 + 150);
context.stroke();
}
function drawMin(min){
context.beginPath();
context.lineWidth=2;
context.moveTo(Math.cos(angle(min,oneMin)) * 15 + 150,Math.sin(angle(min,oneMin)) * 15 + 150);
context.lineTo(Math.cos(angle(min,oneMin)) * 90 + 150,Math.sin(angle(min,oneMin)) * 90 + 150);
context.stroke();
}
function drawSec(min){
context.beginPath();
context.lineWidth=1;
context.moveTo(Math.cos(angle(min,oneMin)) * 45 + 150,Math.sin(angle(min,oneMin)) *45 + 150);
context.lineTo(Math.cos(angle(min,oneMin)) * rc + 150,Math.sin(angle(min,oneMin)) * rc + 150);
context.stroke();
}
var time = new Date();
drawClock(time.getHours());
drawMin(time.getMinutes());
drawSec(time.getSeconds());
}// myClock
setInterval(myClock,1000);
myClock(); |
