Üben Sie das Zusammenführen mehrerer Mausereignisse
In diesem Schritt erstellen wir eine interaktive Zeichnungsanwendung, die mehrere Mausereignisse kombiniert, um zu demonstrieren, wie verschiedene Ereignisse zusammenarbeiten können, um eine reiche Benutzererfahrung zu schaffen. Wir implementieren eine einfache Zeichnungsoberfläche, auf der Benutzer durch Klicken und Ziehen der Maus zeichnen können.
Erstellen Sie in das Verzeichnis ~/project eine neue Datei namens mouse-drawing.html mit dem folgenden Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Interactive Drawing Canvas</title>
<style>
#drawingCanvas {
border: 2px solid #000;
background-color: #f0f0f0;
cursor: crosshair;
}
#colorPicker {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Interactive Drawing Canvas</h1>
<div>
<label for="colorPicker">Choose Color:</label>
<input type="color" id="colorPicker" value="#000000" />
<button id="clearCanvas">Clear Canvas</button>
</div>
<canvas id="drawingCanvas" width="600" height="400"></canvas>
<p id="drawingStatus">
Start drawing by clicking and dragging on the canvas
</p>
<script>
const canvas = document.getElementById("drawingCanvas");
const ctx = canvas.getContext("2d");
const colorPicker = document.getElementById("colorPicker");
const clearButton = document.getElementById("clearCanvas");
const drawingStatus = document.getElementById("drawingStatus");
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// Mouse down event - start drawing
canvas.addEventListener("mousedown", startDrawing);
// Mouse move event - draw while mouse is pressed
canvas.addEventListener("mousemove", draw);
// Mouse up and mouse out events - stop drawing
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
// Clear canvas button
clearButton.addEventListener("click", clearCanvas);
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
drawingStatus.textContent = "Drawing in progress...";
}
function draw(e) {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.strokeStyle = colorPicker.value;
ctx.lineWidth = 2;
ctx.lineCap = "round";
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
function stopDrawing() {
isDrawing = false;
drawingStatus.textContent = "Drawing stopped. Start again!";
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawingStatus.textContent = "Canvas cleared. Start drawing!";
}
</script>
</body>
</html>
Wichtige Merkmale dieser interaktiven Zeichnungsanwendung:
- Kombiniert mehrere Mausereignisse:
mousedown: Zeichnen startenmousemove: Während der Mausdrücke weiterzeichnenmouseup und mouseout: Zeichnen stoppen
- Farbwähler ermöglicht das Ändern der Zeichnungsfarbe
- Clear-Canvas-Button setzt die Zeichnung zurück
- Statusmeldungen geben Benutzerfeedback
Beispielinteraktionen:
- Klicken und Ziehen auf der Zeichenfläche, um zu zeichnen
- Die Zeichnungsfarbe mit dem Farbwähler ändern
- Klicken Sie auf "Clear Canvas", um die Zeichnungsfläche zurückzusetzen
