Canvas Clock Using JS

MLSA-MUET-SZAB-Club-Khairpur-Mir-s · Oct 9, 2022 · 510d657 · 510d657
1 parent 4a6c33a
commit 510d657
Showing 1 changed file with 109 additions and 0 deletions.
diff --git a/JavaScript/index.html b/JavaScript/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+
+    <div style="text-align: center;">
+
+        <canvas id="canvas" width="600" height="600"
+style="background-color:#FFFF">
+
+
+</canvas>
+    </div>
+
+<script>
+    var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var radius = canvas.height / 2;
+ctx.translate(radius, radius);
+radius = radius * 0.90
+setInterval(drawClock, 1000);
+
+drawClock();
+
+function drawClock() {
+
+        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);
+    ///Clock Face Backgroudn
+    ctx.fillStyle = '#FFE4C4';
+    ctx.fill();
+    grad = ctx.createRadialGradient(0, 0, radius * 8, 0, 0, radius * 1.05);
+
+    grad.addColorStop(0, '#FF0000');
+    grad.addColorStop(0.5, '#2596be');
+    //Border Style
+    grad.addColorStop(1, '#F08080');
+    ctx.strokeStyle = grad;
+    ctx.lineWidth = radius * 0.02;
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
+
+    //Numbers Style
+    ctx.fillStyle = '#2596be';
+    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 hour = now.getHours();
+    var minute = now.getMinutes();
+    var second = now.getSeconds();
+    //hour
+    hour = hour % 12;
+    hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
+    drawHand(ctx, hour, radius * 0.5, radius * 0.07);
+    //minute
+    minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
+    drawHand(ctx, minute, radius * 0.8, radius * 0.07);
+    // second
+    second = (second * Math.PI / 30);
+    drawHand(ctx, second, radius * 0.9, radius * 0.02);
+}
+
+
+function drawHand(ctx, pos, length, width) {
+    ctx.beginPath();
+    ctx.lineWidth = width;
+    ctx.lineCap = "round";
+    ctx.moveTo(0, 0);
+    ctx.rotate(pos);
+    ctx.lineTo(0, -length);
+    ctx.stroke();
+    ctx.rotate(-pos);
+}
+</script>
+
+
+</body>
+</html>