<!DOCTYPE html>
<html>
<head></head>
<script>
function tick(_ctx, _radius)
{
var _time = document.getElementById("time");
setInterval(function()
{
var _date = new Date();
var yyyy = _date.getFullYear();
var mm = _date.getMonth() + 1;
var dd = _date.getDate();
var hh = _date.getHours();
var mi = _date.getMinutes();
var ss = _date.getSeconds();
_mm = ("0" + mm).substr(-2);
_dd = ("0" + dd).substr(-2);
_hh = ("0" + hh).substr(-2);
_mi = ("0" + mi).substr(-2);
_ss = ("0" + ss).substr(-2);
_time.innerText = yyyy + "." + _mm + "." + _dd + " " + _hh + ":" + _mi + ":" + _ss;
// Draw face
_ctx.beginPath();
_ctx.arc(0, 0, _radius, 0, 2 * Math.PI);
_ctx.fillStyle = "#777";
_ctx.fill();
_ctx.beginPath();
_ctx.arc(0, 0, _radius * 0.95, 0, 2 * Math.PI);
_ctx.fillStyle = "white";
_ctx.fill();
// Draw points
_ctx.fillStyle = "#777";
_ctx.textBaseline = "middle";
_ctx.textAlign = "center";
for (num = 1; num <= 60; num++)
{
if (num % 5 == 0)
{
_ctx.font = "bold " + _radius * 0.1 + "px arial";
}
else
{
_ctx.font = _radius * 0.06 + "px arial";
}
ang = num / 60 * 2 * Math.PI;
_ctx.rotate(ang);
_ctx.translate(0, -_radius * 0.93);
_ctx.fillText("|", 0, 0);
_ctx.translate(0, _radius * 0.93);
_ctx.rotate(-ang);
}
// Draw numbers
_ctx.font = _radius * 0.15 + "px arial";
_ctx.fillStyle = "#333";
_ctx.textBaseline = "middle";
_ctx.textAlign = "center";
// Draw Hands
var _x = 0;
var _y = 0;
for (num = 1; num <= 12; num++)
{
/*
ang = num * Math.PI / 6;
_ctx.rotate(ang);
_ctx.translate(0, -_radius * 0.84);
_ctx.rotate(-ang);
_ctx.fillText(num.toString(), 0, 0);
_ctx.rotate(ang);
_ctx.translate(0, _radius * 0.84);
_ctx.rotate(-ang);
*/
_x = Math.cos((num / 12 * 2 * Math.PI) - (Math.PI / 2));
_y = Math.sin((num / 12 * 2 * Math.PI) - (Math.PI / 2));
_ctx.fillText(num.toString(), _x * _radius * 0.8, _y * _radius * 0.8);
}
// hour
_x = Math.cos((hh / 12 * 2 * Math.PI) - (Math.PI / 2) + (mi / 60 * Math.PI / 6));
_y = Math.sin((hh / 12 * 2 * Math.PI) - (Math.PI / 2) + (mi / 60 * Math.PI / 6));
drawHand(_ctx, _x * _radius * 0.7, _y * _radius * 0.7, 5, "#000000");
// minute
_x = Math.cos((mi / 60 * 2 * Math.PI) - (Math.PI / 2) + (ss / 60 * Math.PI / 30));
_y = Math.sin((mi / 60 * 2 * Math.PI) - (Math.PI / 2) + (ss / 60 * Math.PI / 30));
drawHand(_ctx, _x * _radius * 0.8, _y * _radius * 0.8, 3, "#AAAAAA");
// second
_x = Math.cos((ss / 60 * 2 * Math.PI) - (Math.PI / 2));
_y = Math.sin((ss / 60 * 2 * Math.PI) - (Math.PI / 2));
drawHand(_ctx, _x * _radius * 0.9, _y * _radius * 0.9, 1, "#ff0000");
// Draw center cover
_ctx.beginPath();
_ctx.arc(0, 0, _radius * 0.05, 0, 2 * Math.PI);
_ctx.fillStyle = "#333";
_ctx.fill();
}, 1000);
}
function drawHand(_ctx, _x, _y, _width, _color)
{
_ctx.beginPath();
_ctx.moveTo(0, 0);
_ctx.lineTo(_x, _y);
_ctx.lineCap = "round";
_ctx.strokeStyle = _color;
_ctx.lineWidth = _width;
_ctx.stroke();
}
window.onload = function()
{
var _canvas = document.getElementById("canvas");
var _ctx = _canvas.getContext("2d");
var _radius = _canvas.width / 2;
_ctx.translate(_radius, _radius);
tick(_ctx, _radius);
}
</script>
<body>
<canvas id="canvas" width="300" height="300">
Your browser does not support the HTML5 canvas tag.</canvas>
<div id="time" style="border:1px solid black; width:300px; text-align:center"></div>
</body>
</html>
시계 : https://blog.daonelab.com/analog_clock.html
canvas tag 참조 : https://www.w3schools.com/tags/ref_canvas.asp
삼각함수 참조 : https://blog.daonelab.com/post/48/1698/