HTML-Leinwand drawImage () -Methode

Um das Bild zu verwenden:

Der Schrei

Beispiele

Um ein Bild auf der Leinwand ziehen:

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2D");
var img = document.getElementById ( "Schrei");
img.onload = function () {
ctx.drawImage (img, 10,10);
}

Versuchen »

Browser-Unterstützung

Internet Explorer 9, Firefox, Opera, Chrome und Safari Unterstützung drawImage () -Methode.

Hinweis: 8 und frühere Versionen von Internet Explorer unterstützt nicht das <canvas> -Element.

Definition und Verwendung

drawImage () -Methode ein Bild, Video oder Leinwand auf der Leinwand zu zeichnen.

Bestimmte Teile zu drawImage () -Methode kann auch das Bild zu zeichnen, und / oder zu erhöhen oder die Größe des Bildes zu verringern.

JavaScript-Syntax

Positionieren des Bildes auf der Leinwand:

JavaScript-Syntax:	Kontext .drawImage (img, x, y);

Positionieren des Bildes auf der Leinwand, und einer vorbestimmten Breite und Höhe des Bildes:

JavaScript-Syntax:	Kontext .drawImage (img, x, y, Breite, Höhe);

Schneiden Sie Bild und lokalisieren den abgeschnittenen Teil auf Leinwand:

JavaScript-Syntax:	Kontext .drawImage (img, sx, sy, swidth, sheight, x, y, Breite, Höhe);

Parameter Wert

Parameter	Beschreibung
img	Vorgegebene Bild, Leinwand oder Video, das Sie verwenden möchten.
sx	Optional. Starten Sie die x-Koordinate der Position zu schneiden.
sy	Optional. Starten Sie schneiden y-Koordinaten.
swidth	Optional. Es ist die Breite des Schnittbildes.
sheight	Optional. Hohe Schnittbild.
x	Ort x-Koordinatenposition des Bildes auf der Leinwand.
y	Platzieren y-Koordinaten der Position des Bildes auf der Leinwand.
Breite	Optional. Um die Breite des Bildes verwenden (durch Strecken oder das Bild schrumpft).
Höhe	Optional. Die Höhe des Bildes möchten Sie (durch Dehnung oder Schrumpfung des Bildes) zu verwenden.

Weitere Beispiele

Beispiele

Auf der Leinwand die Bildposition, geben Sie dann die Breite und Höhe des Bildes:

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2D");
var img = document.getElementById ( "Schrei");
img.onload = function () {
ctx.drawImage (img, 10,10,150,180);
}

Versuchen »

Beispiele

Schneiden Sie das Bild, und auf der Leinwand der gescherten Teile positioniert sind:

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2D");
var img = document.getElementById ( "Schrei");
ctx.drawImage (img, 90,130,50,60,10,10,50,60);

Versuchen »