HTML - Velocity Draw

Einführung in Velocity Draw

Hallo, zukünftige Web-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt von HTML und einem kleinen, nützlichen Werkzeug namens Velocity Draw. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich Schritt für Schritt durch dieses Abenteuer zu führen. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – wir beginnen bei Null!

Was ist Velocity Draw?

Velocity Draw ist eine einfache, aber leistungsstarke HTML5 Canvas-basierte Zeichenanwendung. Sie ermöglicht es den Benutzern, Zeichnungen zu erstellen, indem sie ihre Maus oder ihren Finger (bei Touch-Geräten) über den Bildschirm bewegen. Das Cooler Teil? Je schneller du dich bewegst, desto dünner wird die Linie!

Einrichtung unserer HTML-Datei

Lassen wir mit der Erstellung einer grundlegenden HTML-Struktur für unsere Velocity Draw-Anwendung beginnen. Öffne deinen Lieblings-Texteditor und gebe den folgenden Code ein:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
// Hier kommen wir später zurück
</script>
</body>
</html>

Dies erstellt ein grundlegendes HTML-Dokument mit einem Canvas-Element, auf dem wir zeichnen werden, und einem Script-Tag, in dem wir unseren JavaScript-Code schreiben.

JavaScript-Zauber: Den Canvas interaktiv machen

Jetzt fügen wir etwas JavaScript hinzu, um unseren Canvas interaktiv zu gestalten. Wir brechen es in kleine, verdauliche Stücke herunter:

1. Canvas einrichten

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Hier holen wir uns unser Canvas-Element, erhalten sein 2D-Render-Kontext (den wir zum Zeichnen verwenden werden) und setzen seine Größe, um den gesamten Bildschirm zu füllen.

2. Mausbewegungen verfolgen

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

Wir richten einige Variablen ein, um zu verfolgen, ob wir zeichnen, die letzte Position der Maus und die aktuelle Geschwindigkeit. Dann fügen wir Ereignis-Listener für Mausaktionen hinzu.

3. Zeichenfunktionen implementieren

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

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

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}

Diese Funktionen verwalten die tatsächliche Zeichnung. Die draw-Funktion ist der Ort, an dem die Magie passiert – sie berechnet die Geschwindigkeit basierend darauf, wie weit die Maus sich bewegt hat, und passt die Linienbreite entsprechend an.

Alles zusammenfügen

Nun, da wir alle Teile haben, kombinieren wir sie in unserer HTML-Datei:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

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

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}
</script>
</body>
</html>

Wie es funktioniert

Wenn du die Maustaste drückst, wird startDrawing aufgerufen, was isDrawing auf true setzt und die Startposition aufzeichnet.
Während du die Maus bewegst, wird draw mehrmals aufgerufen. Es zeichnet eine Linie vom letzten Position zum aktuellen Position.
Die Geschwindigkeit wird basierend darauf berechnet, wie weit die Maus sich seit dem letzten Aufruf bewegt hat.
Die Linienbreite ist umgekehrt proportional zur Geschwindigkeit – schnellere Bewegung ergibt dünnere Linien.
Wenn du die Maustaste loslässt oder sie aus dem Canvas herausbewegst, wird stopDrawing aufgerufen, was den Zeichenprozess stoppt.

Fazit

Glückwunsch! Du hast gerade deine eigene Velocity Draw-Anwendung erstellt. Ist es nicht erstaunlich, wie wenige Zeilen Code etwas so interaktives und unterhaltsames erstellen können? Während du mit deinem neuen Zeichenwerkzeug spielst, überlege, wie du es erweitern könntest. Könntest du Farboptionen hinzufügen? Was wäre mit verschiedenen Pinselstilen?

Denke daran, der Schlüssel zum Werden eines großartigen Programmierers ist Experimentieren und Üben. Also bleib neugierig, weiter码ieren und vor allem: weiter Spaß haben!

Methode	Beschreibung
`getElementById`	Ein Element aus dem DOM nach seiner ID abrufen
`getContext`	Den Render-Kontext für das Canvas erhalten
`addEventListener`	Ein Ereignis-Handler an ein Element anhängen
`beginPath`	Ein neues Pfad im Canvas beginnen
`moveTo`	Den Zeichen-Cursor zu einem spezifischen Punkt bewegen
`lineTo`	Eine Linie vom aktuellen Punkt zu einem spezifischen Punkt zeichnen
`stroke`	Den definierten Pfad mit der aktuellen Strich-Stil rendern
`Math.sqrt`	Die Quadratwurzel einer Zahl berechnen
`Math.pow`	Eine Zahl auf eine spezifische Potenz erheben
`Math.max`	Den größten Wert aus null oder mehr Zahlen zurückgeben

Happy Coding, zukünftige Web-Zauberer!

Credits: Image by storyset

Vorheriges Tutorial:

HTML - Web-Präsentationsdesk

Nächstes Tutorial:

HTML - QR-Code