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 http://m.miracleart.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!