Canvas drawImage() Methode

Canvas-Referenzhandbuch

Definition und Verwendung

drawImage() Methode zum Zeichnen von Bildern, Canvas oder Videos auf dem Canvas.

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

Beispiel

Beispiel 1

Zu verwendendes Bild:

Tulpe

Zeichnen Sie das Bild auf den Canvas:

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

Hinweis:Mehr Beispiele finden Sie am Seitenende.

Syntax

JavaScript Syntax 1

Positionieren Sie das Bild auf dem Canvas:

context.drawImage(img,x,y);

JavaScript Syntax 2

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

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

JavaScript Syntax 3

Schneiden Sie das Bild aus und positionieren Sie den geschnittenen Teil auf dem Canvas:

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

Parameter value

Parameter Beschreibung
img Legen Sie das Bild, den Canvas 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 dem Canvas.
y Die y-Koordinate der Position des Bildes auf dem Canvas.
width Optional. Die Breite des Bildes, das verwendet werden soll. (Strecken oder verkleinern Sie das Bild)
height Optional. Die Höhe des Bildes, das verwendet werden soll. (Strecken oder verkleinern Sie das Bild)

Mehr Beispiele

Beispiel 2

Positionieren Sie das Bild auf dem Canvas 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 den ausgeschnittenen Teil auf dem Canvas:

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

Bereich:

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

JavaScript （每 20 毫秒，代码就会绘制视频的当前帧）：

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

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die dieses Attribut 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.

Canvas-Referenzhandbuch