Spaces:
Running
Running
File size: 2,759 Bytes
d4a90dc ce4f9e0 7a6ace8 d4a90dc 7a6ace8 ce4f9e0 d4a90dc 7a6ace8 d4a90dc 7a6ace8 d4a90dc 7a6ace8 ce4f9e0 d4a90dc 7a6ace8 ce4f9e0 7a6ace8 d4a90dc 7a6ace8 d4a90dc ce4f9e0 7a6ace8 ce4f9e0 d4a90dc ce4f9e0 7a6ace8 d4a90dc 605271b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimalist White Circle with FPS</title>
<style>
body {
margin: 0; /* Remove default margin */
overflow: hidden; /* Prevent scrollbars */
}
canvas {
display: block; /* Remove canvas default inline display */
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const versionText = 'v1.0.0';
let fps = 0;
let lastFrameTime = performance.now();
function initializeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.fillStyle = 'black';
context.fillRect(0, 0, canvas.width, canvas.height);
}
function drawWhiteCircle() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(canvas.width, canvas.height) * 0.00625; // 0.625% of the smaller dimension
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
context.strokeStyle = 'white';
context.lineWidth = 0.125 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 0.125em stroke
context.stroke();
}
function drawVersionText() {
context.font = '1em Arial';
context.fillStyle = 'white';
context.textAlign = 'right';
context.textBaseline = 'bottom';
context.fillText(versionText, canvas.width - 10, canvas.height - 10);
}
function drawFPS() {
context.font = '1em Arial';
context.fillStyle = 'white';
context.textAlign = 'left';
context.textBaseline = 'top';
context.fillText(fps.toFixed(1) + ' fps', 10, 10);
}
function updateFPS() {
const now = performance.now();
const deltaTime = now - lastFrameTime;
lastFrameTime = now;
const currentFPS = 1000 / deltaTime;
fps = fps + (currentFPS - fps) * 0.1; // LERP for smooth FPS updates
}
function draw() {
initializeCanvas();
drawWhiteCircle();
drawVersionText();
drawFPS();
}
function loop() {
updateFPS();
draw();
requestAnimationFrame(loop);
}
loop();
window.addEventListener('resize', draw);
</script>
</body>
</html>
|