59 lines
No EOL
1.5 KiB
Text
59 lines
No EOL
1.5 KiB
Text
---
|
|
title: Clock
|
|
tags:
|
|
- demoExample
|
|
---
|
|
{% assign pageBase = "../../" -%}
|
|
{% assign bodyClass = "body_clock" -%}
|
|
{% layout "hippie/full.liquid" %}
|
|
|
|
{% block body %}
|
|
<main>
|
|
<canvas id="clock" width="512" height="512"></canvas>
|
|
</main>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
{{ block.super -}}
|
|
<script>
|
|
// Page script
|
|
const canvas = document.getElementById('clock');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
function drawCircle(seconds, minutes, hours) {
|
|
const centerX = canvas.width / 2;
|
|
const centerY = canvas.height / 2;
|
|
const radius = 128;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
function drawArc(value, maxValue, radius, strokeStyle) {
|
|
const startAngle = -0.5 * Math.PI; // Start at the top
|
|
const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
|
|
ctx.lineWidth = 16;
|
|
ctx.strokeStyle = strokeStyle;
|
|
ctx.stroke();
|
|
}
|
|
|
|
drawArc(seconds, 60, radius, 'black');
|
|
drawArc(minutes, 60, radius - 20, 'lightgrey');
|
|
// drawArc(hours % 12, 12, radius - 40, 'white');
|
|
drawArc(hours, 24, radius - 40, 'white');
|
|
}
|
|
|
|
function updateCircle() {
|
|
const currentDate = new Date();
|
|
const currentSeconds = currentDate.getSeconds();
|
|
const currentMinutes = currentDate.getMinutes();
|
|
const currentHours = currentDate.getHours();
|
|
|
|
drawCircle(currentSeconds, currentMinutes, currentHours);
|
|
}
|
|
|
|
updateCircle();
|
|
setInterval(updateCircle, 1000);
|
|
</script>
|
|
{% endblock %} |