sthag
fcdbfb41ef
- New screen for a ring clock - Add a canvas with the first ring - No functionality yet
34 lines
No EOL
706 B
Text
34 lines
No EOL
706 B
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 drawRing(x, y, outerRadius, innerRadius, color) {
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, outerRadius, 0, Math.PI * 2);
|
|
ctx.arc(x, y, innerRadius, 0, Math.PI * 2, true);
|
|
ctx.closePath();
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
}
|
|
|
|
drawRing(256, 256, 128, 96, 'black');
|
|
</script>
|
|
{% endblock %} |