Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Referenz für clientseitiges JavaScript > CanvasRenderingContext2D.drawImage( )

CanvasRenderingContext2D.drawImage( )Zeichnet ein Bild

Überblick

void drawImage(Image bild, float x, float y)
void drawImage(Image bild, float x, float y,
        float breite, float hoehe)
void drawImage(Image bild, integer sourceX, integer sourceY,
               integer sourceBreite, integer sourceHoehe,
               float destX, float destY,
               float destBreite, float destHoehe)

Argumente


bild

Das zu zeichnende Bild. Dieses muss ein Image-Objekt sein, das ein <img>-Tag repräsentiert, oder auch ein Offscreen-Bild oder ein Canvas-Objekt.


x, y

Der Punkt, an dem die linke obere Ecke des Bildes gezeichnet wird.


breite, hoehe

Die Größe, in der das Bild gezeichnet werden soll. Die Spezifikation dieser Argumente skaliert das Bild.


sourceX, sourceY

Die linke obere Ecke der zu zeichnenden Bildregion. Diese ganzzahligen Argumente werden in Bildpixeln angegeben.


sourceBreite, sourceHoehe

Die Abmessungen der zu zeichnenden Bildregion, angegeben in Bildpixeln.


destX, destY

Die Canvas-Koordinaten, an denen die linke obere Ecke der Bildregion gezeichnet werden soll.


destBreite, destHoehe

Die Canvas-Dimensionen, mit denen die Bildregion gezeichnet werden soll.

Beschreibung

Bei dieser Methode gibt es drei Varianten. Bei der ersten Variante wird das gesamte Bild auf den Canvas kopiert: Die linke, obere Ecke wird auf den angegebenen Punkt gesetzt, und jeder Bildpixel wird auf eine Einheit im Canvas-Koordinatensystem abgebildet. Bei der zweiten Variante wird ebenfalls das gesamte Bild auf den Canvas kopiert, Sie können die gewünschte Breite und Höhe des Bildes jedoch in Canvas-Einheiten festlegen. Die dritte Variante ist ganz variabel: Mit ihr können Sie jede beliebige, rechteckige Bildregion festlegen und kopieren, wobei das Bild beliebig auf jeder Position im Canvas skaliert werden kann.

Das an diese Methode übergebene Bild muss ein Image- oder Canvas-Objekt sein. Ein Image-Objekt kann ein <img>-Tag im Dokument oder ein über den Image( )-Konstruktor erstelltes Offscreen-Bild repräsentieren.

Siehe auch

Image

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint