Eine der unterhaltsameren Funktionen der Leinwand ist die Möglichkeit, Bilder zu verwenden. Diese können verwendet werden, um dynamische Fotokompositionen durchzuführen oder als Hintergründe von Grafiken usw. verwendet zu werden Externe Bilder können in jedem von Gecko unterstützten Format (z. B. PNG-, GIF- oder JPEG -Format) verwendet werden. Andere Leinwandelemente auf derselben Seite können ebenfalls als Quelle verwendet werden.
Eines der interessanten Merkmale von Leinwand ist, dass es Bilder einführen kann, die für die Bildsynthese oder die Hintergrundproduktion usw. verwendet werden können. Derzeit kann nur Text zu Bildern hinzugefügt werden (die Standardbeschreibung enthält nicht die Funktion des Zeichnungstextes). Solange die von Gecko unterstützten Bilder (wie PNG, GIF, JPEG usw.) in Leinwand eingeführt werden können und andere Leinwandelemente auch als Bildquelle verwendet werden können.
Das Importieren von Bildern ist im Grunde ein zweistufiger Prozess:
Die Einführung eines Bildes erfordert nur zwei einfache Schritte:
Schauen wir uns zuerst Schritt eins an. Grundsätzlich sind vier Optionen verfügbar:
Schauen wir uns zuerst den ersten Schritt an, es gibt im Grunde vier Optionen:
Wir können auf eine Seite auf alle Bilder zugreifen, indem wir entweder die Dokument -IMAGE -Sammlung, das Dokument.GetElementsByTagName -Methode verwenden oder das ID -Attribut des Bildes, das Dokument.GetElementById -Methode kennen.
Wir können das Bild in der Seite (wenn die ID des Bildelements bekannt ist) über das Dokument ab. IMAGES COLLECTION, DOCUMENTS.GetElementsByTagName -Methoden oder die Methode für Dokument.GetElementById.
Genau wie bei normalen Bildern Zugriff auf andere Canvas -Elemente, die entweder das Dokument.GetElementsByTagName -Methode oder die Methode für Dokument.GetElementById. Stellen Sie sicher, dass Sie etwas in die Quell -Leinwand gezogen haben, bevor Sie es in Ihrer Ziel -Leinwand verwenden.
Ähnlich wie beim Bild auf der Referenzseite verwenden Sie das Dokument. Aber was Sie vorstellen sollten, ist die rede Leinwand.
Eine der praktischeren Verwendungszwecke wäre die Verwendung eines zweiten Leinwandelements als Miniaturansicht der anderen größeren Leinwand.
Eine häufige Anwendung besteht darin, Miniaturansichten für eine andere große Leinwand zu erstellen.
<Eine andere Möglichkeit besteht darin, neue Bildobjekte in unserem Skript zu erstellen. Das Hauptunternehmen dieses Ansatzes ist, dass wir, wenn wir nicht möchten, dass unser Skript in der Mitte anhält, weil es warten muss, bis ein Bild geladen wird, eine Form von Bildvorladen benötigen.
Darüber hinaus können wir Skripte verwenden, um ein neues Bildobjekt zu erstellen. Der Hauptnachteil dieser Methode besteht jedoch darin, dass wir, wenn wir nicht möchten, dass das Skript innehalten, weil wir auf das Bildgerät warten, immer noch Vorspannung durchbrechen müssen.
Um ein neues Bildobjekt zu erstellen, tun wir dies:
Wir können Bilder auf folgende einfache Weise erstellen:
var img = new Image (); // neue Bildobjektimg.src = 'myimage.png' erstellen; // Quellpfad festlegen
Wenn dieses Skript ausgeführt wird, beginnt das Bild zu laden. Wenn das Laden nicht fertig ist, wenn eine Drawimage -Anweisung ausgeführt wird, hält das Skript an, bis das Bild beendet ist. Wenn Sie nicht möchten, dass dies geschieht, verwenden Sie einen Onload -Event -Handler:
Wenn das Skript ausgeführt wird, beginnt das Bild zu laden. Wenn das Bild beim Aufrufen von Drawage nicht geladen ist, wartet das Skript, bis es geladen ist. Wenn Sie dies nicht wollen, können Sie das Onload -Ereignis verwenden:
var img = new Image (); // Neue Bild erstellen objektimg.onload = function () {// Drawimage -Anweisungen hier ausführen} img.src = 'myimage.png'; // Quellpfad festlegenWenn Sie nur ein externes Bild verwenden, kann dies ein guter Ansatz sein, aber wenn Sie mehr als eines verfolgen müssen, müssen wir auf etwas Listes zurückgreifen. Es liegt außerhalb des Rahmens dieses Tutorials, sich die Vorladungstaktik im Bild anzusehen, aber Sie können sich JavaScript Image Preloader für eine vollständige Lösung ansehen.
Wenn Sie nur ein Bild verwenden, reicht das aus. Es ist jedoch einmal mehr als ein Bild erforderlich, eine komplexere Verarbeitungsmethode ist erforderlich, aber die Bildvorladungsstrategie geht über den Rahmen dieses Tutorials hinaus. Wenn Sie interessiert sind, können Sie sich auf den JavaScript -Image -Voroader beziehen.
Eine weitere mögliche Möglichkeit, Bilder einzubeziehen, ist die Daten: URL. Mit Daten -URLs können Sie ein Bild als Basis 64 -codierte Zeichenfolge direkt in Ihrem Code vollständig definieren. Ein Vorteil von Daten -URLs besteht darin, dass das resultierende Bild sofort ohne eine weitere Rundreise zum Server verfügbar ist. (Ein weiterer Vorteil besteht darin, dass es dann möglich ist, in einer Datei alle Ihre CSS, JavaScript, HTML und Bilder zu verkapulieren, wodurch es für andere Stellen tragbarer wird.) Einige Nachteile dieser Methode sind, dass Ihr Bild nicht zwischengespeichert wird, und für größere Bilder können die codierten URL recht lang werden:
Wir können auch Bilder über die Daten: URL -Methode verweisen. Durch Daten-URLs kann ein Bild in einer Reihe von Base64-kodierten Zeichenfolgen definiert werden. Der Vorteil ist, dass der Bildinhalt sofort verfügbar ist, ohne den Server erneut umzugehen. (Und ein weiterer Vorteil besteht darin, dass CSS, JavaScript, HTML und Bilder zusammenkapseln können, was sehr bequem zu migrieren ist.) Der Nachteil ist, dass die Bilder nicht zwischengespeichert werden können. Wenn die Bilder groß sind, sind die eingebetteten URL -Daten ziemlich lang:
var img_src = 'Daten: Bild/gif; base64, r0lgodlhcwalaiaaaaaaaaaaaa3pn/Zih5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiAaaaaaaaaaaaaaaaaaaaiUha+hkcuo4lmnvindo7qyriow ==';
Sobald wir einen Verweis auf unser Quellbildobjekt haben, können wir die Drawimage -Methode verwenden, um sie auf die Leinwand zu rendern. Wie wir später sehen werden, ist die Drawimage -Methode überladen und verfügt über drei verschiedene Varianten. In seiner grundlegendsten Form sieht es so aus.
Sobald das Quellgrafikobjekt erhalten wurde, können wir es unter Verwendung der Drawimage -Methode in Leinwand bringen. Es gibt drei Formen der Drawimage -Methode, und das Folgende ist die grundlegendste.
Drawimage (Bild, x, y)Wo Bild ein Verweis auf unser Bild- oder Canvas -Objekt ist. x und y bilden die Koordinate auf der Ziel -Leinwand, in der unser Bild platziert werden soll.
Wo Bild ein Bild- oder Canvas -Objekt ist und X und Y ihre Startkoordinaten in der Ziel -Leinwand sind.
Im folgenden Beispiel werde ich ein externes Bild als Hintergrund eines kleinen Zeilendiagramms verwenden. Durch die Verwendung von Hintergründen kann Ihr Skript erheblich kleiner werden, da wir keinen aufwändigen Hintergrund zeichnen müssen. Ich verwende hier nur ein Bild, daher verwende ich den Onload -Ereignishandler des Bildobjekts, um die Zeichnungsanweisungen auszuführen. Die Drawimage -Methode legt den Hintergrund auf die Koordinate (0,0), die die obere linke Ecke der Leinwand ist.
Im folgenden Beispiel verwende ich ein externes Bild als Hintergrund eines linearen Bildes. Wir müssen keinen verantwortungsvollen Hintergrund mit dem Hintergrundbild zeichnen und viel Code speichern. Hier wird nur ein Bildobjekt verwendet, sodass die Draw -Aktion in der Funktion der Onload -Ereignisantwort ausgelöst wird. Die Drawimage -Methode platziert das Hintergrundbild in der oberen linken Ecke (0,0) der Leinwand.
functionDraw () {
Funktion Draw () {var ctx = document.getElementById ('canvas'). getContext ('2d'); var img = new Image (); img.onload = function () {ctx.drawimage (img, 0,0); ctx.beginPath (); ctx.moveto (30,96); ctx.lineto (70,66); ctx.lineto (103,76); ctx.lineto (170,15); ctx.stroke (); } img.src = 'Bilder/backdrop.png'; }Die zweite Variante der Drawimage -Methode fügt zwei neue Parameter hinzu und ermöglicht es uns, skalierte Bilder auf die Leinwand zu platzieren.
Eine weitere Variante der Drawimage -Methode ist die Zugabe von zwei Parametern, um das Bild in Leinwand zu steuern.
Drawimage (Bild, x, y, Breite, Höhe)Wo Breite und Höhe die Größe des Bildes auf der Ziel -Leinwand sind.
In diesem Beispiel werde ich ein Bild als Hintergrundbild verwenden und es mehrmals auf der Leinwand wiederholen. Dies geschieht einfach durch Schleifen und Platzieren der skalierten Bilder an verschiedenen Positionen. In dem Code unter dem ersten für Schleifen durch die Zeilen die zweite für die Schleife die Spalten. Das Bild ist ein Drittel seiner ursprünglichen Größe, die 50x38 Pixel beträgt. Wir werden sehen, wie dies auch erreicht werden könnte, indem wir später in diesem Tutorial ein benutzerdefiniertes Muster erstellen können.
In diesem Beispiel würde ich ein Bild verwenden, um sich wiederholend wie der Hintergrund in Leinwand auszubreiten. Es ist auch sehr einfach zu implementieren, einfach durch die vergrößerten Bilder zu schauen. Siehe den Code unten. Die erste Schicht für Schleife besteht darin, Zeilen zu wiederholen, und die zweite Ebene besteht darin, Spalten zu wiederholen. Die Bildgröße ist auf ein Drittel des ursprünglichen 50 x 38 px skaliert. Diese Methode kann verwendet werden, um den Effekt von Hintergrundmustern gut zu erreichen, wie Sie im folgenden Tutorial sehen werden.
HINWEIS : Bilder können beim Skalieren oder körnig werden, wenn sie zu viel abgebaut werden. Skalierung ist wahrscheinlich am besten nicht fertig, wenn Sie einen Text enthalten, der lesbar bleiben muss.HINWEIS: Das Bild kann aufgrund der großen Skalierung in großem Maßstab dunkel oder verschwommen werden. Wenn Ihr Bild Text hat, ist es am besten nicht skaliert, denn nach der Verarbeitung ist es sehr wahrscheinlich, dass der Text im Bild nicht wiederzuerkennen ist.
functionDraw () {
Funktion Draw () {var ctx = document.getElementById ('canvas'). getContext ('2d'); var img = new Image (); img.onload = function () {für (i = 0; i <4; i ++) {für (j = 0; j <3; j ++) {ctx.drawimage (img, j*50, i*38,50,38); }}} img.src = 'images/rhino.jpg'; }Die dritte und letzte Variante der Drawimage -Methode hat acht neue Parameter. Wir können diese Methode verwenden, um Teile eines Quellbildes zu schneiden und sie auf die Leinwand zu zeichnen.
Die dritte und letzte Variante der Drawimage -Methode enthält 8 neue Parameter, um die Anzeige von Scheiben zu steuern.
Drawimage (Bild, SX, Sy, Swidth, Shight, DX, DY, Dwidth, Dheight)Das erste Parameterbild ist wie bei den anderen Varianten entweder eine Referenz auf ein Bildobjekt oder eine Referenz auf ein anderes Canvas -Element. Für die anderen acht Parameter ist es am besten, das Bild rechts zu betrachten. Die ersten vier Parameter definieren die Position und Größe des Slice auf dem Quellbild. Die letzten vier Parameter definieren die Position und Größe auf der Ziel -Leinwand.
Der erste Parameter ist der gleiche wie die anderen, beide sind Verweise auf das oder eine andere Leinwand. Die anderen 8 Parameter werden am besten auf das Diagramm auf der rechten Seite verwiesen. Die ersten 4 definieren die Scheibenposition und Größe der Bildquelle und die letzten 4 definieren die Position und Größe der Zielanzeige der Scheibe.
Das Schneiden kann ein nützliches Werkzeug sein, wenn Sie Kompositionen erstellen möchten. Sie können alle Elemente in einer einzelnen Bilddatei haben und diese Methode verwenden, um eine vollständige Zeichnung zu kombinieren. Wenn Sie beispielsweise ein Diagramm erstellen möchten, können Sie ein PNG -Bild haben, das den gesamten erforderlichen Text in einer einzelnen Datei enthält und abhängig von Ihren Daten die Skala Ihres Diagramms ohne große Schwierigkeiten ändern kann. Ein weiterer Vorteil ist, dass Sie nicht jedes Bild einzeln laden müssen.
Schneiden ist ein leistungsstarkes Werkzeug für die Bildsynthese. Angenommen, es gibt ein Bild, das alle Elemente enthält, und dann können Sie diese Methode verwenden, um ein vollständiges Bild zu synthetisieren. Wenn Sie beispielsweise ein Diagramm zeichnen und eine PNG -Datei mit allen erforderlichen Text auf Ihrer Hand haben möchten, können Sie das endgültige Diagramm entsprechend den tatsächlichen Datenanforderungen problemlos ändern. Ein weiterer Vorteil dieser Methode besteht darin, dass Sie jedes Bild nicht separat laden müssen.
In diesem Beispiel werde ich das gleiche Nashorn wie oben gesehen, aber jetzt werde ich seinen Kopf herausschleppen und ihn in einen Bilderrahmen zusammenfügen. Das Bild des Bilderrahmens enthält einen Dropshadow, der als 24-Bit-PNG-Bild gespeichert wurde. Da 24-Bit-PNG-Bilder einen vollständigen 8-Bit-Alpha-Kanal enthalten, kann ich ihn im Gegensatz zu GIF- und 8-Bit-PNG-Bildern auf einen beliebigen Hintergrund legen und muss mich nicht um eine matte Farbe kümmern.
In diesem Beispiel habe ich das Rhino-Bild verwendet, das ich oben verwendet hatte, aber dieses Mal machte ich eine Scheibe Nahaufnahme des Rhino-Kopfes und synthetisiert es dann in einen Fotorahmen. Der Rahmen hat einen Schatteneffekt und ist ein Bild, das im 24-Bit-PNG-Format gespeichert ist. Da das 24-Bit-PNG-Bild mit einem vollen 8-Bit-Alpha-Kanal ausgestattet ist, kann ich es im Gegensatz zu GIF und 8-Bit-PNG als Hintergrund als Hintergrund setzen, ohne mir Sorgen um die zugrunde liegende Farbe zu machen.
Ich habe eine andere Annäherung an das Laden der Bilder als das obige Beispiel gewählt. Ich habe gerade die Bilder direkt in meinem HTML -Dokument platziert und eine CSS -Regel verwendet, um sie vor der Ansicht zu verbergen (Anzeige: Keine). Ich habe beide Bilder ein ID -Attribut zugewiesen, um sie zu erleichtern, um sie auszuwählen. Das Skript selbst ist sehr einfach. Ich zeichne zuerst das geschnittene und skalierte Bild auf der Leinwand (zuerst Drawimage -Anweisung) und platziere dann den Rahmen oben (zweite Drawimage -Anweisung).
Ich lade das Bild auf eine andere Weise als das oben, das ich oben verwendet habe, das Bild direkt in die HTML einfügt und es dann durch CSS ausblende (Anzeige: keine). Ich habe IDs für beide Bilder zugewiesen, die für die spätere Verwendung zweckmäßig sind. Wenn man sich das Drehbuch unten ansieht, ist es ganz einfach. Schneiden Sie zuerst den Rhino -Kopf (das erste Drawage) und legen Sie ihn auf die Leinwand und legen Sie dann einen Fotorahmen darauf (das zweite Zeichnen).
Funktion Draw () {var canvas = document.getElementById ('canvas'); var ctx = canvas.getContext ('2d'); // Slice ctx.drawimage (document.getElementById ('Source'), 33,71,104,124,21,20,87,104) zeichnen; // Frame CTX.Drawimage (document.getElementById ('Frame'), 0,0);};Im letzten Beispiel dieses Kapitels habe ich eine kleine Kunstgalerie gemacht. Die Galerie besteht aus einer Tabelle mit mehreren Bildern. Wenn die Seite geladen wird, wird für jedes Bild auf der Seite ein Leinwandelement eingefügt und ein Rahmen um ihn herum gezogen.
In meinem Fall haben alle Bilder eine feste Breite und Höhe, ebenso wie der Rahmen, der um sie gezogen wird. Sie können das Skript so verbessern, dass es die Breite und Höhe des Bildes verwendet, um den Rahmen perfekt um ihn herum zu passen.
Der folgende Code sollte selbsterklärend sein. Wir durchlaufen das Bilderarray und fügen neue Leinwandelemente entsprechend hinzu. Wahrscheinlich ist das einzige, was zu beachten ist, für diejenigen, die mit der DOM nicht so vertraut sind, die Verwendung der Insert -vor -Methode. Einfügen vor einer Methode des übergeordneten Knotens (eine Tabellenzelle) des Elements (das Bild), vor dem wir unseren neuen Knoten (das Canvas -Element) einfügen möchten.