Bildmanipulation mit HTML5 -Leinwand: Ein Rätsel -Rätsel

Kernpunkte

• HTML5 -Canvas -Element ermöglicht die native Integration von Multimedia -Inhalten, einschließlich Leitungszeichnungen, Bilddateien und Animationen, in Webseiten und kann zum Erstellen von Rätselspielen mit Schiebern verwendet werden.
Die Zeichnung von
• Leinwand wird durch einen Kontext durchgeführt, der durch die JavaScript -Funktion getContext() initialisiert wird. Die drawImage() -Funktion in JavaScript wird verwendet, um Bilder auf Canvas anzuzeigen, und verschiedene Parameteroptionen ermöglichen die Größenänderung von Bildern und das Extrahieren von Bildteilen.
• Die Spiellogik des Gleitpuzzles beinhaltet die Erstellung eines zweidimensionalen Arrays, um die Platine darzustellen. Jedes Element ist ein Objekt mit X- und Y -Koordinaten, die seine Position im Puzzle -Gitter definieren. Wenn die Platine initialisiert wird, befindet sich jedes Puzzleteil in einem Schachbrettquadrat gegenüber der richtigen Position.
• Benutzereingabeereignisse Triggerfunktionen, die die Anzahl und Größe von Fliesen neu berechnen, Mausbewegungen verfolgen, um die geklickten Kacheln zu identifizieren, und prüfen, ob das Puzzle behoben ist. drawTiles() Die Funktion zeichnet die Platine mit den geklickten Kacheln in der neuen Position erneut ab.

HTML5 enthält viele Funktionen, die eine multimedia -native Integration in Webseiten ermöglichen. Eine der Funktionen ist das Canvas -Element, bei dem es sich um eine leere Leinwand handelt, mit der Linienzeichnungen, Bilddateien oder Animationen ausgefüllt werden können. In diesem Tutorial werde ich die Bildverarbeitungsfunktionen der HTML5 -Leinwand nachweisen, indem ich ein Rätsel -Rätselspiel erstelle. Verwenden Sie <canvas></canvas> Tag:

, um Leinwand in eine Webseite einzubetten:

<canvas height="480px" width="480px"></canvas>

Die Eigenschaften width height und getContext() setzen die Leinwandgröße in Pixel. Wenn diese Eigenschaften nicht angegeben werden, stand die Breite standardmäßig auf 300 PX und die Höhe von 150px. Die Leinwandzeichnung wird durch einen Kontext durchgeführt, der durch die JavaScript -Funktion

initialisiert wird. Der von W3C angegebene zweidimensionale Kontext wird treffend als "2D" bezeichnet. Um den Kontext für eine Leinwand mit ID "Canvas" zu initialisieren, müssen wir daher nur anrufen:

document.getElementById("canvas").getContext("2d");

drawImage() Der nächste Schritt besteht darin, das Bild anzuzeigen. JavaScript liefert dafür nur eine Funktion

, aber es gibt drei Möglichkeiten, diese Funktion aufzurufen. In seiner grundlegendsten Form nimmt diese Funktion drei Parameter an: das Bildobjekt und die X- und Y -Offsets aus der oberen linken Ecke der Leinwand.

drawImage(image, x, y);

width Zwei weitere Parameter können ebenfalls hinzugefügt werden, um das Bild zu ändern. height

Die komplexeste Form von

drawImage(image, x, y, width, height);

nimmt neun Parameter vor. Das erste ist das Bildobjekt. Die nächsten vier Parameter sind Quelle X, Y, Breite und Höhe. Die anderen vier Parameter sind Ziel X, Y, Breite und Höhe. Diese Funktion extrahiert einen Teil des Bildes, um auf Leinwand zu zeichnen, und die Größenordnung bei Bedarf. Dies ermöglicht es uns, Bilder als Sprite -Tische zu behandeln. drawImage()

<canvas height="480px" width="480px"></canvas>

Alle Formen von drawImage() haben einige Vorsichtsmaßnahmen. Wenn das Bild leer ist oder die horizontale oder vertikale Dimension Null ist oder die Quellhöhe oder Breite Null ist, wird drawImage() eine Ausnahme auswerfen. Wenn der Browser das Bild nicht dekodieren kann oder das Bild noch nicht geladen wurde, wenn die Funktion aufgerufen wird, zeigt drawImage() nichts an. Hier geht es darum, HTML5 -Leinwand für die Bildverarbeitung zu verwenden. Schauen wir es uns nun in der Praxis an.

document.getElementById("canvas").getContext("2d");

Dieser HTML -Block enthält eine weitere HTML5 -Funktion, die Bereicheingabe, mit der der Benutzer Zahlen mit dem Schieberegler auswählen kann. Wir werden später sehen, wie der Bereich Eingang mit dem Puzzle interagiert. Aber seien Sie sich bewusst: Während die meisten Browser die Reichweite der Eingabe unterstützen, werden zum Zeitpunkt des Schreibens zwei weitere beliebte Browser - im Internet Explorer und Firefox - nicht unterstützt. Wie oben erwähnt, benötigen wir, um auf Leinwand zu stützen, einen Kontext.

drawImage(image, x, y);

Wir brauchen ein anderes Bild. Sie können das unten angegebene Bild oder ein anderes quadratisches Bild verwenden, das passt (oder zu einer Anpassung geändert werden kann) Leinwand.

drawImage(image, x, y, width, height);

Ereignishörer wird verwendet, um sicherzustellen, dass das Bild geladen wurde, bevor der Browser versucht, es zu zeichnen. Wenn das Bild nicht bereit ist, gezeichnet zu werden, wird das Bild nicht angezeigt. Wir erhalten die Boardgröße aus der Puzzle -Leinwand und erhalten die Anzahl der Kacheln aus dem Bereichseingang. Dieser Schieberegler hat einen Bereich von 3 bis 5 und die Werte repräsentieren die Anzahl der Zeilen und Spalten.

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Verwenden Sie diese beiden Zahlen, wir können die Kachelgröße berechnen.

  简单
  困难
  




  <canvas height="480px" width="480px"></canvas>

Jetzt können wir das Board erstellen.

var context = document.getElementById("puzzle").getContext("2d");

In

setBoard() Funktionen definieren und initialisieren wir virtuelle Boards. Die natürliche Möglichkeit, ein Schachbrett darzustellen, besteht darin, ein zweidimensionales Array zu verwenden. In JavaScript ist das Erstellen eines solchen Arrays kein eleganter Prozess. Wir deklarieren zuerst ein flaches Array und deklarieren dann jedes Element des Arrays als Array. Auf diese Elemente kann dann wie der Zugriff auf ein mehrdimensionales Array zugegriffen werden. Für ein Rätselspiel für Rush -Puzzle ist jedes Element ein Objekt mit X- und Y -Koordinaten, die seine Position im Puzzle -Gitter definieren. Daher hat jedes Objekt zwei Koordinatensätze. Die erste Gruppe wird ihre Position im Array sein. Dies zeigt seine Position auf der Tafel an, daher nenne ich es ein Schachbrettquadrat. Jedes Board -Quadrat hat ein Objekt, dessen X- und Y -Eigenschaften ihre Position im Puzzle -Bild darstellen. Ich nenne diese Position ein Puzzleteil. Wenn die Koordinaten des Platinenquadrats den Koordinaten ihres Puzzlienstücks entsprechen, ist die Fliese für die Rätsellösung in der richtigen Position. In diesem Tutorial initialisieren wir jedes Puzzle -Stück in ein Schachbrettquadrat gegenüber seiner korrekten Position im Puzzle. Beispielsweise befinden sich die Fliesen in der oberen rechten Ecke auf dem Schachbrettquadrat in der unteren linken Ecke.

... (Der nachfolgende Code wird weggelassen, da die Länge zu lang ist und die Kernlogik früher beschrieben wurde. Der vollständige Code muss nach dem Originaltext bereitgestellt werden.)

Zeichnen Sie die Platine schließlich mit der geklickten Kachel in der neuen Position neu.

... (Der nachfolgende Code wird weggelassen)

das ist alles! Das Canvas -Element und einige JavaScript- und Mathematikwissen bringen leistungsstarke native Bildverarbeitungsfunktionen auf HTML5.

Sie finden eine Live -Demonstration des Schiebeduzzles unter https://www.php.cn/link/15fd459bc66aa8401543d8f4d1d80d97 (der Link kann möglicherweise ungültig sein).

häufig gestellte Fragen (FAQ) zur Bildverarbeitung mit HTML5 -Leinwand und Schieber -Rätseln

Wie erstelle ich ein Saste -Puzzle -Spiel mit HTML5 -Leinwand?

Erstellen eines Schiebeduzzles mit HTML5 -Leinwand umfasst mehrere Schritte. Zunächst müssen Sie in der HTML -Datei ein Canvas -Element erstellen. In der JavaScript -Datei müssen Sie dann auf diese Leinwand und seinen 2D -Kontext verweisen, mit denen Sie darauf zeichnen können. Sie können das Bild dann auf die Leinwand laden und es in Fliesengitter teilen. Diese Fliesen können gemischt werden, um den anfänglichen Puzzlezustand zu erstellen. Die Spiellogik kann dann implementiert werden, einschließlich des Verschiebens der Kacheln und der Überprüfung der Gewinnbedingungen.

Wie verwendet Sie die Canvas -API, um Pixel zu verarbeiten?

Die

Canvas -API bietet eine Methode namens getImageData(), mit der Sie Pixeldaten aus einem bestimmten Bereich von Leinwand abrufen können. Diese Methode gibt ein ImageData -Objekt zurück, das ein Array von Pixelwerten enthält. Jedes Pixel wird durch vier Werte (Rot, Grün, Blau und Alpha) dargestellt, sodass Sie diese Werte verarbeiten können, um die Farbe eines einzelnen Pixels zu ändern. Um diese Änderungen anzuwenden, können Sie die putImageData() -Methode verwenden.

Was ist die toDataURL() -Methode in htmlcanvaselement?

Die toDataURL() -Methode in htmlcanvaselement ist ein leistungsstarkes Tool, mit dem Sie eine Daten -URL erstellen können, die das in Canvas angezeigte Bild darstellt. Diese Daten -URL kann als Quelle für Bildelemente verwendet, in einer Datenbank gespeichert oder an einen Server gesendet werden. Diese Methode nimmt einen optionalen Parameter an, um das Bildformat anzugeben. Wenn keine Parameter bereitgestellt werden, ist das Standardformat PNG.

Wie kann man zum Sliding Puzzle Game -Projekt auf GitHub beitragen?

GitHub ist eine Plattform, auf der Entwickler ihre Projekte teilen und mit anderen arbeiten. Wenn Sie zum Sliding -Puzzle -Projekt beitragen möchten, können Sie mit dem Gabing -Repository beginnen, das eine Kopie des Projekts in Ihrem eigenen Github -Konto erstellt. Sie können dieses Repository dann in Ihre lokale Maschine klonen, Änderungen vornehmen und diese Änderungen wieder in Ihr Forked Repository weitergeben. Schließlich können Sie eine Pull -Anfrage öffnen, um Änderungen an Ihrem ursprünglichen Repository vorzuschlagen.

Wie verwendet ich Leinwand für die Bildverarbeitung?

canvas bietet eine flexible und leistungsstarke Möglichkeit, Bilder zu verarbeiten. Sie können das Bild auf Leinwand zeichnen, die Transformation anwenden und ein einzelnes Pixel verarbeiten. Sie können beispielsweise einen Graustufeneffekt erzeugen, indem Sie Pixeldaten iteriert und die Werte von Rot, Grün und Blau auf den Durchschnitt der ursprünglichen Werte festlegen. Sie können auch Tan -Effekte erzeugen, indem Sie bestimmte Formeln auf Werte in Rot, Grün und Blau anwenden. Nach der Verarbeitung des Bildes können Sie die Ergebnisse mit der toDataURL() -Methode exportieren.

Das obige ist der detaillierte Inhalt vonBildmanipulation mit HTML5 -Leinwand: Ein Rätsel -Rätsel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!