HTML Canvas drawImage() Methode

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

drawImage() Methode zum Zeichnen eines Bildes, eines Canvas oder eines Videos auf dem Bildschirm.

drawImage() Die Methode kann auch bestimmte Teile von Bildern zeichnen und/oder die Größe von Bildern erhöhen oder verringern.

Beispiel

Beispiel 1

Zu verwendendes Bild:

Tulpe

Zeichnen Sie das Bild auf die Leinwand:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10);

Probieren Sie es selbst aus

Tipp:Mehr Beispiele finden Sie am Ende der Seite.

Syntax

JavaScript Syntax 1

Positionieren Sie das Bild auf der Leinwand:

context.drawImage(img,x,y);

JavaScript Syntax 2

Positionieren Sie das Bild auf der Leinwand und legen Sie die Breite und Höhe des Bildes fest:

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

JavaScript Syntax 3

Schneiden Sie das Bild aus und positionieren Sie das ausgeschnittene Teil auf der Leinwand:

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

Parameterwert

Parameter Beschreibung
img Legen Sie das Bild, die Leinwand oder das Video fest, das verwendet werden soll.
sx Optional. Die x-Koordinate des Beginns des Schneidens.
sy Optional. Die y-Koordinate des Beginns des Schneidens.
swidth Optional. Die Breite des ausgeschnittenen Bildes.
sheight Optional. Die Höhe des ausgeschnittenen Bildes.
x Die x-Koordinate der Position des Bildes auf der Leinwand.
y Die y-Koordinate der Position des Bildes auf der Leinwand.
width Optional. Die Breite des Bildes, das verwendet werden soll. (Vergrößern oder verkleinern Sie das Bild)
height Optional. Die Höhe des Bildes, das verwendet werden soll. (Vergrößern oder verkleinern Sie das Bild)

Mehr Beispiele

Beispiel 2

Positionieren Sie das Bild auf der Leinwand und legen Sie die Breite und Höhe des Bildes fest:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10, 240, 160);

Probieren Sie es selbst aus

Beispiel 3

Schneiden Sie das Bild aus und positionieren Sie das ausgeschnittene Teil auf der Leinwand:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 90, 80, 20, 20, 90, 80);

Probieren Sie es selbst aus

Beispiel 4

Zu verwendendes Video (Drücken Sie die Wiedergabetaste, um die Demo zu starten):

Leinwand:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

JavaScript (jedes 20 Millisekunden zeichnet der Code das aktuelle Frame des Videos):

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()} 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Probieren Sie es selbst aus

Browserunterstützung

Die in der Tabelle genannten Zahlen geben die erste Browserversion an, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

HTML5 Canvas Referenzhandbuch