HTML-Canvas drawImage()- Methode

Zu verwendendes Bild:

Der Schrei

Beispiel

Zeichnen Sie das Bild auf die Leinwand:

JavaScript:

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

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Definition und Verwendung

Die Methode drawImage() zeichnet ein Bild, eine Leinwand oder ein Video auf die Leinwand.

Die Methode drawImage() kann auch Teile eines Bildes zeichnen und/oder die Bildgröße vergrößern/verkleinern.

Hinweis: Sie können die Methode drawImage() nicht aufrufen, bevor das Bild geladen wurde. Um sicherzustellen, dass das Bild geladen wurde, können Sie drawImage() von window.onload() oder von document.getElementById(" imageID ").onload aufrufen.

JavaScript-Syntax

Positionieren Sie das Bild auf der Leinwand:

JavaScript syntax:	context.drawImage(img,x,y);

Positionieren Sie das Bild auf der Leinwand und geben Sie Breite und Höhe des Bildes an:

JavaScript syntax:	context.drawImage(img,x,y,width,height);

Beschneiden Sie das Bild und positionieren Sie den beschnittenen Teil auf der Leinwand:

JavaScript syntax:	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Parameterwerte

Parameter	Description	Play it
img	Specifies the image, canvas, or video element to use
sx	Optional. The x coordinate where to start clipping
sy	Optional. The y coordinate where to start clipping
swidth	Optional. The width of the clipped image
sheight	Optional. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional. The width of the image to use (stretch or reduce the image)
height	Optional. The height of the image to use (stretch or reduce the image)

Mehr Beispiele

Beispiel

Positionieren Sie das Bild auf der Leinwand und geben Sie Breite und Höhe des Bildes an:

JavaScript:

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

Beispiel

Beschneiden Sie das Bild und positionieren Sie den beschnittenen Teil auf der Leinwand:

JavaScript:

window.onload = function() {
var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
};