var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var centerX = width / 2;
var centerY = width / 2;
var r = 200;
function init() {
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(centerX, centerY, 3, 0, 2 * Math.PI);
ctx.stroke();
for (var i = 0; i < 60; i++) {
ctx.beginPath();
var angle = i * 6;
var x = Math.cos(Math.PI * angle / 180.0) * r + centerX;
var y = Math.sin(Math.PI * angle / 180.0) * r + centerY;
ctx.moveTo(x, y);
var toX = Math.cos(Math.PI * angle / 180.0) * (r - 15) + centerX;
var toY = Math.sin(Math.PI * angle / 180.0) * (r - 15) + centerY;
ctx.lineTo(toX, toY);
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.stroke();
}
for (var i = 0; i < 12; i++) {
ctx.beginPath();
var angle = i * 30;
var x = Math.cos(Math.PI * angle / 180.0) * r + centerX;
var y = Math.sin(Math.PI * angle / 180.0) * r + centerY;
ctx.moveTo(x, y);
var toX = Math.cos(Math.PI * angle / 180.0) * (r - 25) + centerX;
var toY = Math.sin(Math.PI * angle / 180.0) * (r - 25) + centerY;
ctx.lineTo(toX, toY);
ctx.lineWidth = 10;
ctx.strokeStyle = "blue";
ctx.stroke();
var textX = Math.cos(Math.PI * angle / 180.0) * (r - 40) + centerX;
var textY = Math.sin(Math.PI * angle / 180.0) * (r - 40) + centerY;
ctx.beginPath();
ctx.lineWidth = 1;
ctx.font = "14px Arial";
ctx.textAlign = "center";
ctx.strokeStyle = "black";
var num = i + 3;
if (num > 12) {
num = num - 12
}
ctx.strokeText(num, textX, textY);
}
}
function second(num) {
var seconds = num;
var secondsAngle = seconds * 6 - 90;
var secondsX = Math.cos(Math.PI * secondsAngle / 180.0) * (r - 50) + centerX;
var secondsY = Math.sin(Math.PI * secondsAngle / 180.0) * (r - 50) + centerY;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(secondsX, secondsY);
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
ctx.stroke();
}
function minite(num, seconds) {
var seconds = num;
var secondsAngle = (seconds + seconds / 59) * 6 - 90;
var secondsX = Math.cos(Math.PI * secondsAngle / 180.0) * (r - 70) + centerX;
var secondsY = Math.sin(Math.PI * secondsAngle / 180.0) * (r - 70) + centerY;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(secondsX, secondsY);
ctx.lineWidth = 4;
ctx.strokeStyle = "yellow";
ctx.stroke();
}
function hours(num, minitue) {
if (num > 12) {
num = num - 12;
}
var seconds = num * 5;
var secondsAngle = (seconds + minitue / 59) * 6 - 90;
var secondsX = Math.cos(Math.PI * secondsAngle / 180.0) * (r - 90) + centerX;
var secondsY = Math.sin(Math.PI * secondsAngle / 180.0) * (r - 90) + centerY;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(secondsX, secondsY);
ctx.lineWidth = 6;
ctx.strokeStyle = "red";
ctx.stroke();
}
setInterval(function() {
init();
second(new Date().getSeconds())
minite(new Date().getMinutes(), new Date().getSeconds())
hours(new Date().getHours(), new Date().getMinutes())
}, 1000)
