clock/index.html at main · upandey0/clock · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: rgb(69, 155, 137);
        }
        h1{
            color: rgb(232, 198, 29);
            text-align: center;
        }
        #mycanvas{
            border: 2px solid black;
            position: relative;
            left: 35%;
            right: 35%;
        }
    </style>
</head>
<body>
    <h1>Analog Clock</h1>
    <canvas id="mycanvas" height="400px" width="400px"></canvas>
    <script>
        let canvas = document.getElementById('mycanvas')
        var ctx = canvas.getContext('2d')
        var radius = canvas.height/2
        ctx.translate(radius,radius)
        drawClock()
        function drawClock()
        {
        ctx.beginPath()
        ctx.arc(0,0,200,0,2*Math.PI)
        ctx.stroke()
        ctx.fillStyle = "white"
        ctx.fill()
        ctx.stroke()
        drawFace(ctx,radius)
        drawNumbers(ctx,radius)
        drawTime(ctx,radius)
        }

        function drawFace(ctx,radius)
        {
            var grad;
            ctx.beginPath();
            ctx.arc(0,0,radius,0,2*Math.PI)
            ctx.fillstyle = 'white'
            ctx.fill();
            grad = ctx.createRadialGradient(0,0,radius*0.95,0,0,radius*1.05)
            grad.addColorStop(0.5,'white')
            grad.addColorStop(0,'#333')
            grad.addColorStop(1,'#333')
            ctx.strokeStyle = grad;
            ctx.lineWidth = radius * 0.1;
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0,0,radius*0.1,0,2*Math.PI)
            ctx.fillStyle = '#333'
            ctx.fill();
        }
        function drawNumbers(ctx,radius)
        {
            var ang;
            var num;
            ctx.font = radius * 0.15 +"px Arial";
            ctx.textBaseline = 'middle'
            ctx.textAlign = 'center'
            for(num=1;num<13;num++)
            {
                ang = num * Math.PI/6
                ctx.rotate(ang)
                ctx.translate(0,-radius * 0.85)
                ctx.rotate(-ang)
                ctx.fillText(num.toString(),0,0)
                ctx.rotate(ang)
                ctx.translate(0,radius*0.85)
                ctx.rotate(-ang)
            }
        }
        function drawTime(ctx,radius)
        {
            var now = new Date()
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            hours=hours%12;
            hours = (hours * Math.PI/6) + (minutes*Math.PI/(6*60)) + (seconds*Math.PI/(360*60))
            drawHand(ctx,hours,radius*0.5,radius*0.07);
            minutes = (minutes*Math.PI/30)+(seconds*Math.PI/(30*60))
            drawHand(ctx,minutes,radius*0.8,radius*0.07)
            seconds = (seconds*Math.PI/(30))
            drawHand(ctx,seconds,radius*0.9,radius*0.02)

        }
        function drawHand(ctx,pos,lenght,width)
        {
            ctx.beginPath();
            ctx.lineWidth = width
            ctx.lineCap = "round"
            ctx.moveTo(0,0);
            ctx.rotate(pos)
            ctx.lineTo(0,-lenght)
            ctx.stroke()
            ctx.rotate(-pos)
        }
        setInterval(drawClock,1000)
    </script>

</body>
</html>