initial commit

2024-08-24 21:11:48 +02:00 · 2024-08-24 21:11:48 +02:00 · 5352d458ea
commit 5352d458ea
parent ac1c3bdab1
1 changed files with 106 additions and 0 deletions
--- a/word_display_story_fixed_alignment.html
+++ b/word_display_story_fixed_alignment.html
@ -0,0 +1,106 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+        }
+
+        h1 {
+            margin-bottom: 20px;
+            color: #333;
+        }
+
+        #myCanvas {
+            background-color: #ffffff;
+            border-radius: 10px;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        #pauseButton, #speedInput {
+            margin-top: 20px;
+            padding: 10px 20px;
+            font-size: 16px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+            transition: background-color 0.3s ease;
+        }
+
+        #pauseButton {
+            color: #fff;
+            background-color: #007bff;
+        }
+
+        #pauseButton:hover {
+            background-color: #0056b3;
+        }
+
+        #speedInput {
+            width: 100px;
+            text-align: center;
+        }
+
+    </style>
+</head>
+<body>
+
+<h1>HTML5 Canvas fillText()</h1>
+
+<canvas id="myCanvas" width="500" height="100" style="border:1px solid grey;">
+Sorry, your browser does not support canvas.
+</canvas>
+
+<input type="number" id="speedInput" value="200" min="50" max="1000" step="50"> ms
+<button id="pauseButton">Pause</button>
+
+<script>
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
+let string = "Es war einmal ein kleiner Fuchs namens Felix, der in einem friedlichen Wald lebte. Eines Tages entdeckte Felix einen geheimen Pfad, den er noch nie zuvor gesehen hatte. Neugierig, wohin dieser Pfad führen könnte, beschloss er, ihm zu folgen. Der Pfad führte tief in den Wald, vorbei an alten Bäumen und moosbedeckten Steinen. Plötzlich bemerkte Felix, dass die Bäume um ihn herum anfingen, in allen Farben des Regenbogens zu leuchten. Er war erstaunt, denn so etwas hatte er noch nie gesehen. Die Blätter der Bäume schimmerten in einem sanften Licht, und der Boden war mit funkelnden Blumen bedeckt, die bei jedem Schritt ein leises Glöckchen erklingen ließen. Felix wusste, dass er einen magischen Ort gefunden hatte. Er setzte sich auf eine Lichtung und beobachtete die leuchtenden Tiere, die durch den Wald huschten. Ein freundlicher Vogel mit goldenen Federn landete neben ihm und fragte: Was führt dich in unseren magischen Wald, kleiner Fuchs? Ich bin nur neugierig, antwortete Felix. Ich habe diesen Pfad entdeckt und wollte sehen, wohin er führt. Der Vogel lächelte. Du hast Glück, diesen Ort gefunden zu haben. Nicht jeder kann unseren Wald sehen. Es ist ein Ort der Ruhe und des Friedens, aber nur für diejenigen, die mit einem reinen Herzen kommen. Felix war gerührt. Er versprach, das Geheimnis des Waldes zu bewahren und kehrte schließlich auf den Pfad zurück, der ihn nach Hause führte. Von diesem Tag an wusste Felix, dass er immer einen Ort hatte, an den er zurückkehren konnte, wenn er Ruhe und Frieden brauchte. Und so lebte er glücklich weiter, in dem Wissen, dass der magische Wald immer da war, wenn er ihn brauchte.".split(" ");
+let c = 0;
+let delay = parseInt(document.getElementById("speedInput").value); // 200 milliseconds = 0.2 seconds
+let paused = false; // Flag to check if paused
+let timeoutId; // Store the timeout ID
+
+document.getElementById("pauseButton").addEventListener("click", function() {
+  paused = !paused; // Toggle pause state
+  this.textContent = paused ? "Resume" : "Pause"; // Change button text
+  if (!paused) {
+    displayWord(); // Resume word display if not paused
+  } else {
+    clearTimeout(timeoutId); // Clear the timeout if paused
+  }
+});
+
+document.getElementById("speedInput").addEventListener("change", function() {
+  delay = parseInt(this.value);
+});
+
+function displayWord() {
+  if (c < string.length && !paused) {
+    let word = string[c];
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    ctx.font = "24px Arial";
+    ctx.textAlign = "center"; // Center the text horizontally
+    ctx.textBaseline = "middle"; // Center the text vertically
+    ctx.fillText(word, canvas.width / 2, canvas.height / 2); // Display the word at the center
+    c++;
+    timeoutId = setTimeout(displayWord, delay); // Store the timeout ID
+  }
+}
+
+displayWord(); // Start the process
+</script>
+
+</body>
+</html>