mirror of
https://github.com/byReqz/ugly-clock.git
synced 2024-11-24 23:04:56 +00:00
98 lines
2.1 KiB
HTML
98 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>ugly clock</title>
|
||
|
|
<style>
|
||
|
|
#container {
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
var canvas, ctx, clockWidth, centerX, centerY;
|
||
|
|
|
||
|
|
function drawClockFace() {
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(centerX, centerY, 8, 0, 2 * Math.PI, false);
|
||
|
|
ctx.fillStyle= "black";
|
||
|
|
ctx.fill();
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.strokeStyle= "black";
|
||
|
|
for (var i= 0; i < 60; i++) {
|
||
|
|
ctx.save();
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.translate(centerX, centerY);
|
||
|
|
ctx.rotate(i * Math.PI / 30);
|
||
|
|
ctx.translate(0, -clockWidth / 2);
|
||
|
|
if ((i % 5) == 0) {
|
||
|
|
ctx.moveTo(0, 0);
|
||
|
|
ctx.lineWidth= 4;
|
||
|
|
ctx.lineTo(0, 10);
|
||
|
|
} else {
|
||
|
|
ctx.moveTo(0, 2);
|
||
|
|
ctx.lineWidth= 1;
|
||
|
|
ctx.lineTo(0, 7);
|
||
|
|
}
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.restore();
|
||
|
|
}
|
||
|
|
} // drawClockFace()
|
||
|
|
|
||
|
|
function drawHand(length, angle) {
|
||
|
|
ctx.save();
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.translate(centerX, centerY);
|
||
|
|
ctx.rotate(Math.PI * (angle - 180) / 180);
|
||
|
|
ctx.moveTo(0, 0);
|
||
|
|
ctx.lineTo(0, length);
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.restore();
|
||
|
|
} // drawHand(.,.)
|
||
|
|
|
||
|
|
function onDrawTime() {
|
||
|
|
drawClockFace();
|
||
|
|
|
||
|
|
var date= new Date();
|
||
|
|
var hours= date.getHours() % 12;
|
||
|
|
var minutes= date.getMinutes();
|
||
|
|
var seconds= date.getSeconds();
|
||
|
|
|
||
|
|
ctx.strokeStyle= "rgb(0, 0, 255)";
|
||
|
|
ctx.lineWidth= 6;
|
||
|
|
drawHand(clockWidth / 3.5, (hours + (minutes / 60)) * 30);
|
||
|
|
|
||
|
|
ctx.strokeStyle= "rgba(0, 255, 0, 0.7)";
|
||
|
|
ctx.lineWidth= 4;
|
||
|
|
drawHand(clockWidth / 2.2, minutes * 6);
|
||
|
|
|
||
|
|
ctx.strokeStyle= "red";
|
||
|
|
ctx.lineWidth= 1;
|
||
|
|
drawHand(clockWidth/2, seconds * 6);
|
||
|
|
} // onDrawTime()
|
||
|
|
|
||
|
|
function initializeClock() {
|
||
|
|
canvas= document.getElementById("analog_clock");
|
||
|
|
clockWidth= Math.min(canvas.width, canvas.height) - 10;
|
||
|
|
ctx= canvas.getContext("2d");
|
||
|
|
centerX= canvas.width / 2;
|
||
|
|
centerY= canvas.height / 2;
|
||
|
|
ctx.lineCap= "round";
|
||
|
|
onDrawTime();
|
||
|
|
setInterval(onDrawTime, 1000);
|
||
|
|
} // initializeClock()
|
||
|
|
|
||
|
|
onload= initializeClock;
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="container">
|
||
|
|
<h1>Hässliche Uhr lol</h1>
|
||
|
|
<canvas id="analog_clock" width="160" height="160">
|
||
|
|
Sorry, canvas is not supported in this browser.
|
||
|
|
</canvas>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|