Erstellen einer Webanwendung für ein Zeichenbrett mit HTML5 Canvas

Einführung

In diesem Projekt werden wir Schritt für Schritt eine einfache webbasierte Zeichenfläche erstellen. Jeder Schritt baut auf dem vorherigen auf, was es Ihnen ermöglicht, die Funktionalität der Anwendung schrittweise hinzuzufügen. Am Ende dieses Projekts werden Sie eine voll funktionsfähige Zeichenfläche haben, auf der Benutzer zeichnen, die Farbe der Pinsel ändern, die Pinselgröße anpassen und die Leinwand löschen können.

👀 Vorschau

drawing board demo

🎯 Aufgaben

In diesem Projekt lernen Sie:

Wie Sie die HTML-Struktur für eine webbasierte Zeichenflächenanwendung einrichten.
Wie Sie den 2D-Rendering-Context eines HTML <canvas>-Elements erstellen und erhalten.
Wie Sie Ereignislistener implementieren, um Mausaktionen zum Zeichnen zu verfolgen.
Wie Sie einen "Löschen"-Button hinzufügen und die Funktionalität implementieren, um die Leinwand zu löschen.
Wie Sie einen Farbwähler-Eingabefeld erstellen und die Funktionalität implementieren, um die Pinselfarbe zu ändern.
Wie Sie einen Bereichseingabefeld hinzufügen, um die Pinselgröße anzupassen, und die Funktionalität implementieren.

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

Eine grundlegende Webseite-Struktur mit HTML zu erstellen.
JavaScript-Ereignislistener verwenden, um Benutzerinteraktionen zu verarbeiten.
Mit HTML <canvas>-Elementen zum Zeichnen arbeiten.
Eine Webanwendung mit CSS gestalten.
HTML, CSS und JavaScript kombinieren, um eine funktionierende Zeichenfläche zu bauen.

Erstelle die HTML-Struktur

Anforderungen:

Öffnen Sie die Datei index.html.
Richten Sie in index.html die grundlegende HTML-Struktur mit einer Leinwand, einem Header und Steuerelemente ein.

Funktionalität:

Die Projekt-Dateien und die grundlegende HTML-Struktur werden erstellt, aber es gibt noch keine Zeichnungsfunktionalität.

Schritte:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Zeichenfläche</title>
  </head>
  <body>
    <header>
      <h1>Zeichenfläche</h1>
    </header>
    <div class="container">
      <div class="controls">
        <input type="color" id="color-picker" value="#000000" />
        <label for="brush-size">Pinselgröße:</label>
        <input type="range" id="brush-size" min="1" max="20" value="5" />
        <button id="clear-btn">Löschen</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Hinzufügen des Canvas

Anforderungen:

Fügen Sie in index.html ein <canvas>-Element mit der ID "whiteboard" und den Maßen (Breite und Höhe) Ihrer Wahl hinzu.

Funktionalität:

Die Leinwand wird zur Webseite hinzugefügt, hat aber noch keine Zeichnungsfähigkeiten.

Schritte:

<body>
  <header>
    <h1>Zeichenfläche</h1>
  </header>
  <div class="container">
    <!-- Leinwand hinzufügen -->
    <canvas id="whiteboard" width="800" height="400"></canvas>
    <div class="controls">
      <input type="color" id="color-picker" value="#000000" />
      <label for="brush-size">Pinselgröße:</label>
      <input type="range" id="brush-size" min="1" max="20" value="5" />
      <button id="clear-btn">Löschen</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

Hinzufügen der Zeichnungsfunktionalität

Anforderungen:

Fügen Sie in script.js JavaScript-Code hinzu, um das Zeichnen auf der Leinwand zu ermöglichen, wenn die Maustaste gedrückt und bewegt wird.
Implementieren Sie Ereignislistener für die mousedown, mouseup und mousemove-Ereignisse.

Funktionalität:

Benutzer können jetzt mit der Maus auf der Leinwand zeichnen.

Schritte:

const canvas = document.getElementById("whiteboard");
const context = canvas.getContext("2d");

let drawing = false;

canvas.addEventListener("mousedown", () => {
  drawing = true;
  context.beginPath();
});

canvas.addEventListener("mouseup", () => {
  drawing = false;
  context.closePath();
});

canvas.addEventListener("mousemove", draw);

function draw(e) {
  if (!drawing) return;

  context.lineCap = "round";

  context.lineTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
  context.stroke();
  context.beginPath();
  context.moveTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
}

Dieser Code ermöglicht das Zeichnen auf der Leinwand, wenn die Maustaste gedrückt und bewegt wird.

Hinzufügen der Löschfunktionalität

Anforderungen:

Fügen Sie in script.js JavaScript-Code hinzu, um die Leinwand zu löschen, wenn der "Löschen"-Button geklickt wird.
Erstellen Sie in index.html einen Button mit der ID "clear-btn".

Funktionalität:

Benutzer können die Leinwand löschen, um ein neues Zeichnen zu beginnen.

Schritte:

const clearButton = document.getElementById("clear-btn");

clearButton.addEventListener("click", () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

Dieser Code ermöglicht es Benutzern, die Leinwand zu löschen, indem sie den "Löschen"-Button klicken.

Hinzufügen der Pinsel-Farbensteuerung

Anforderungen:

Fügen Sie in script.js JavaScript-Code hinzu, um es Benutzern zu ermöglichen, eine Pinsel-Farbe mithilfe eines <input type="color">-Elements auszuwählen.
Erstellen Sie das Farbwähler-Eingabefeld in index.html mit der ID "color-picker".

Funktionalität:

Benutzer können eine Farbe für ihren Pinsel auswählen.

Schritte:

const colorPicker = document.getElementById("color-picker");

colorPicker.addEventListener("input", (e) => {
  context.strokeStyle = e.target.value;
});

Dieser Code ermöglicht es Benutzern, eine Pinsel-Farbe mithilfe des Farbwählers auszuwählen.

Hinzufügen der Pinselgrößensteuerung

Anforderungen:

Fügen Sie in script.js JavaScript-Code hinzu, um es Benutzern zu ermöglichen, die Pinselgröße mithilfe eines <input type="range">-Elements anzupassen.
Erstellen Sie das Eingabefeld für den Wertebereich in index.html mit der ID "brush-size".

Funktionalität:

Benutzer können die Pinselgröße ändern, um dickere oder dünnere Striche zu zeichnen.

Schritte:

const brushSizeInput = document.getElementById("brush-size");

brushSizeInput.addEventListener("input", (e) => {
  context.lineWidth = e.target.value;
});

Dieser Code ermöglicht es Benutzern, die Pinselgröße mithilfe des Eingabefelds für den Wertebereich anzupassen.

CSS Gestaltung

Anforderungen:

Öffnen Sie die Datei styles.css.
Fügen Sie CSS-Stile hinzu, um die Webanwendung optisch ansprechend zu gestalten.

Funktionalität:

Wenden Sie grundlegende Stile auf die Elemente der Webanwendung an.

Schritte:

body {
  font-family: "Arial", sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background: linear-gradient(135deg, #57efbf, #64a8e4);
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(125deg, #67a5f5, #f3bbe0, #64a0e4, #d364e4);
  border-radius: 10px;
  padding: 10px;
}

canvas {
  background-color: #f4f0eb;
  background-size: cover;
  border: 1px solid #919396;
  box-shadow: 0 10px 20px rgba(16, 16, 16, 0.567);
}

.controls {
  margin-top: 10px;
}

label {
  font-weight: bold;
  margin-right: 5px;
  color: #fff;
}

input[type="color"],
input[type="range"] {
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4be2ed;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #dac765;
}

button:focus {
  outline: none;
}

Ausführen der App

Öffnen Sie index.html in einem Webbrowser.
Testen Sie die Anwendung, indem Sie Ausgaben hinzufügen und überprüfen, ob die Ausgabenliste und die Zusammenfassung korrekt aktualisiert werden.
Der Effekt der Seite ist wie folgt:

Zusammenfassung

Herzlichen Glückwunsch! Sie haben eine einfache Webanwendung für ein Zeichenbrett mit HTML, CSS und JavaScript erstellt. Benutzer können auf der Leinwand zeichnen, die Pinsel-Farbe ändern und die Pinselgröße anpassen.