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("scream");
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

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

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("scream");
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("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);

Versuchen »