Einen Beispiel-HTML- und JavaScript-Code zum Erstellen einer canvas mit einer Schaltfläche, die Text enthält und mit Textmetriken wird das Elemente sind innerhalb der Leinwand zentriert!
Inhalt:
1.) ... Das Beispiel zum Erstellen einer Canvas-Schaltfläche in der Mitte!
2.) ... Eine kurze nicht-programmtechnische Erklärung!
1.) Das Beispiel zum Erstellen einer Canvas-Schaltfläche in der Mitte!
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Button</title>
<!-- Styling für das Canvas-Element -->
<style>
canvas {
border: 1px solid #000; /* Schwarzer Rand um das Canvas */
display: block;
margin: auto; /* Zentriert das Canvas horizontal auf der Seite */
}
</style>
</head>
<body>
<!-- Das Canvas-Element, in dem der Button gezeichnet wird -->
<canvas id="myCanvas"></canvas>
<!-- JavaScript-Code -->
<script>
// Holen Sie das Canvas-Element und seinen Kontext
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Funktion zum Zeichnen eines Buttons auf dem Canvas
function drawButton(ctx, text) {
// Button-Eigenschaften definieren
ctx.font = "20px Arial"; // Schriftgröße und -art
var buttonText = text; // Text auf dem Button
var buttonPadding = 10; // Innenabstand des Buttons
// Messen Sie die Breite des Texts,
// um die Breite des Buttons dynamisch zu setzen
var textMetrics = ctx.measureText(buttonText);
// Breite des Buttons
var buttonWidth = textMetrics.width + 2 * buttonPadding;
// Höhe des Buttons
var buttonHeight = 50;
// Den Button horizontal und vertikal zentrieren
var centerX = (canvas.width - buttonWidth) / 2;
var centerY = (canvas.height - buttonHeight) / 2;
// Den Button zeichnen
// Leinwand löschen
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// Hintergrund des Buttons zeichnen
ctx.fillStyle = "#3498db"; // Blaue Farbe
ctx.fillRect(centerX, centerY, buttonWidth, buttonHeight);
// Text auf dem Button zeichnen
ctx.font = "20px Arial";
ctx.fillStyle = "#ffffff"; // Weiße Schriftfarbe
ctx.textAlign = "center"; // Text horizontal zentrieren
ctx.textBaseline = "middle"; // Text vertikal zentrieren
ctx.fillText(buttonText,
centerX + buttonWidth / 2, centerY + buttonHeight / 2);
}
// drawButton-Funktion beim Start aufrufen und den Text "Hallo" übergeben
drawButton(ctx, "Hallo");
// Ein Click-Event-Listener zum Canvas hinzufügen
canvas.addEventListener("click", function (event)
{
// Überprüfen, ob der Klick im Bereich des Buttons liegt
var rect = canvas.getBoundingClientRect();
var mouseX = event.clientX - rect.left;
var mouseY = event.clientY - rect.top;
if (
mouseX >= centerX &&
mouseX <= centerX + buttonWidth &&
mouseY >= centerY &&
mouseY <= centerY + buttonHeight
)
{
alert("Button geklickt!");
}
});
</script>
</body>
</html>
2.) Eine kurze nicht-programmtechnische Erklärung!
HTML-Grundstruktur:
Die HTML-Datei ist die Grundstruktur der Webseite und enthält Metadaten wie die Zeichenkodierung und den Titel der Seite.
Styling mit CSS:
Das <style>-Element enthält CSS-Regeln, die das Canvas-Element formatieren, indem es einen schwarzen Rand setzt und das Canvas horizontal in der Mitte der Seite zentriert.
Canvas und JavaScript:
Ein Canvas-Element wird erstellt, auf dem ein Button gezeichnet wird. Das zugehörige JavaScript-Code enthält eine Funktion, um den Button zu zeichnen.
Die Funktion drawButton definiert Eigenschaften des Buttons wie Text, Schriftart und -größe. Der Button wird dann zentriert auf dem Canvas gezeichnet.
Buttonzeichnung und Initialisierung:
Der Button wird beim Laden der Seite mit dem Text "Hallo" gezeichnet.
Klick-Ereignis:
Ein Klick-Ereignis-Listener wird dem Canvas hinzugefügt, um auf Mausklicks zu reagieren.
Wenn der Mausklick innerhalb der Grenzen des gezeichneten Buttons liegt, wird eine Benachrichtigung mit dem Text "Button geklickt!" angezeigt.
Insgesamt erstellt die Webseite ein einfaches Canvas-Element mit einem zentrierten Button, der bei einem Klick eine Benachrichtigung auslöst.
