Wie einschließen Bilder auf Ihre Web-Seite mit HTML5 Canvas

Während HTML hatte lange Unterstützung für Bilder, die Segeltuch

Schnittstelle von HTML5 fügt neues Leben zu Web-Bilder. Die Bilder können in einer Leinwand angezeigt werden, wo sie mit den Vektor-Zeichentechniken der Leinwand API integriert werden. Sie können auch einen Teil eines Bildes auswählen, um anzuzeigen, und verschiedene Transformationen auf Ihr Bild anwenden, um interessante Kompositionen und Animationen erstellen.

Diese Abbildung zeigt ein Bild zweimal auf einem Canvas-Element gezogen.

bild0.jpg

Zeichnen eines Bildes auf dem HTML5-Canvas

Der einfachste Weg, ein Bild in einem Canvas-Element zu verwenden, ist ein Bild bereits auf der Webseite zu verwenden. Sie können ein Bild auf der Seite mit der gewöhnlichen setzen Tag und verwenden die CSS display: none beherrschen das Bild unsichtbar zu machen. Ein alternativer Ansatz ist eine zu erstellen Image Objekt in javascript und gelten die src Attribut, das Bild zu einer bestimmten Bilddatei zu verbinden. Beispiele für beide Techniken, sollten Sie die folgenden HTML-Code:

Leinwand nicht unterstützt

Der folgende javascript-Code zeigt das Bild in der Leinwand:

 Funktion draw () {var Zeichnung = document.getElementById ( "Zeichnung") - var con = drawing.getContext ( "2D") - var goofyPic = document.getElementById ( "goofyPic") - con.drawImage (goofyPic, 0, 0 , 50, 50) -var image2 = new Bild () - image2.src = "andyGoofy.gif" -con.drawImage (Bild2, 100, 100, 70, 50) -} // end Unentschieden

Hier ist, wie es zu tun:

  1. Erstellen Sie das Bild auf der Hauptseite.

    Der einfachste Weg, um ein Bild für den Zugriff ist gewöhnlichen HTML verwenden, um das Bild auf der Hauptseite zu integrieren. Wenn Sie möchten, können Sie die verstecken Tag mit CSS-Code (display: none) so dass nur die Version in der Leinwand sichtbar.

  2. Erstellen Sie eine javascript-Variable für das Bild mit der document.getElementById () Mechanismus.

  3. Zeichnen Sie das Bild auf der Leinwand mit der drawImage () Funktion.

    Die erste der fünf Parameter ist der Name eines Bildobjektes. (Es ist der Name eines javascript Bildobjekt sein, nicht nur den Dateinamen eines Bildes.) Die folgenden zwei Parameter sind die X und Y-Werte der oberen linken Ecke des Bildes, und die letzten beiden Parameter sind der Größe des Bildes (Breite und Höhe).

  4. Erstellen Sie einen javascript ImageObjekt.

    Wenn Sie nicht über ein Bild in der Seite einbetten möchten, können Sie javascript verwenden, um ein Bild dynamisch zu erstellen. Verwenden Sie die neues Bild() Konstruktor ein neues Bild zu bauen.

  5. Ändern Sie das Bild des srcEigentum.

    Wenn Sie einen javascript-Bild zu erstellen, müssen Sie die angeben src Attribut der Datei mit dem Bild verbunden, um anzuzeigen. Es könnte einige Zeit bis das Bild zu laden.

Das Bild wird nicht angezeigt, bis sie vom Server geladen wurde. In den meisten Fällen wird dies kein Problem sein, aber manchmal müssen Sie Ihr Programm zu verzögern, bis das Bild fertig geladen ist. Das Image Objekt hat eine onload Eigenschaft, die eine Callback-Funktion übernimmt. Verwenden Sie diese Technik, bis die Zeichnung beendet zu warten:

image.onload = finishDrawing-Funktion finishDrawing () {// Rest Code der Zeichnung geht hier}

Zeichnung Teil Leinwand von einem Bild auf der HTML5

Manchmal möchte man einen kleinen Teil des ursprünglichen Bildes zu zeichnen. Ein Programm, das auf der Mitte der goofy Gesicht konzentriert sich in sieht wie folgt aus:

image1.jpg

Es ist ganz einfach Teil eines Bildes zu zeichnen. Verwenden Sie die gleiche drawImage () Befehl, diesmal aber eine Version mit neun Parameter verwenden:

con.drawImage (goofyPic, 60, 70, 90, 90, 0, 0, 150, 150), -

Hier ist, was all diese Parameter bedeuten:

  • Bildname: Der erste Parameter ist das Bildobjekt (nicht der Dateiname, aber der Name des javascript Image Objekt).

  • Linke obere Ecke der Quelle: Die erste Aufgabe ist es, die Teil des ursprünglichen Bildes zu wählen anzuzeigen. Die nächsten beiden Parameter geben die linke obere Ecke einer Auswahl auf dem Originalbild. (Sie können einen Bildeditor wie Gimp oder Irfanview verwenden, um die Auswahlposition und Größe zu bestimmen.)

  • Höhe und Breite der Quelle: Die nächsten beiden Parameter zeigen die Höhe und die Breite der Quellenauswahl.

  • Position Bestimmungsort: Die nächsten beiden Parameter sind die Position der linken oberen Ecke des Bildes auf der Leinwand.

  • Größe Bestimmungsort: Die letzten beiden Parameter beschreiben die Höhe und Breite des Zielbildes auf der Leinwand.

Die Subbild hier beschriebene Technik ist sehr nützlich, weil es Ihnen erlaubt, mehrere Bilder zu einem einzigen Bild zu kombinieren (manchmal auch als ein Sprite Blatt). Dies verringert den Aufwand für das Bild liefert. (Ein großes Bild ist schneller zu liefern als mehrere kleine.) Es wird auch verwendet, häufig in Spielen und Animationen, wo eine Einheit mehrere Bilder nacheinander angezeigt haben könnte vorschlagen zu Fuß oder angreifen.

Ähnliche

Menü