HTML-Canvas drawImage()-Methode

HTML canvas 参考手册 HTML canvas Referenzhandbuch

Zu verwendendes Bild:

The Scream

Beispiel

Zeichnen Sie das Bild auf das Canvas:

JavaScript：

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

Selbst ausprobieren »

Browser-Unterstützung

Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die drawImage()-Methode.

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

Definition und Verwendung

Die drawImage()-Methode zeichnet ein Bild, Canvas oder Video auf das Canvas.

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

JavaScript-Syntax

Ein Bild auf dem Canvas positionieren:

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

Ein Bild auf dem Canvas positionieren und die Breite und Höhe des Bildes angeben:

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

Ein Bild ausschneiden und den ausgeschnittenen Teil auf dem Canvas positionieren:

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

Parameterwerte

Parameter	Beschreibung
img	Gibt das zu verwendende Bild, Canvas oder Video an.
sx	Optional. Die x-Koordinate, an der das Schneiden beginnt.
sy	Optional. Die y-Koordinate, an der das Schneiden beginnt.
swidth	Optional. Die Breite des ausgeschnittenen Bildes.
sheight	Optional. Die Höhe des ausgeschnittenen Bildes.
x	Die x-Koordinate, an der das Bild auf dem Canvas platziert wird.
y	Die y-Koordinatenposition, an der das Bild auf dem Canvas platziert wird.
width	Optional. Die Breite des zu verwendenden Bildes (das Bild strecken oder verkleinern).
height	Optional. Die Höhe des zu verwendenden Bildes (das Bild strecken oder verkleinern).

Weitere Beispiele

Beispiel

Positionieren Sie das Bild auf dem Canvas und geben Sie dann die Breite und Höhe des Bildes an:

JavaScript：

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

Selbst ausprobieren »

Beispiel

Ein Bild ausschneiden und den ausgeschnittenen Teil auf dem Canvas positionieren:

JavaScript：

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);

Selbst ausprobieren »