byreqz/ugly-clock
1
0
Fork 0
mirror of https://github.com/byReqz/ugly-clock.git synced 2024-11-24 23:04:56 +00:00
Code Issues Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Nils 2019-08-13 02:45:33 +02:00 committed by GitHub
parent bc8c8b9309
commit 395d7f1d6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
index.html Normal file
View File

@ -0,0 +1,97 @@
<!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>