Neueste Web-Entwicklung Tutorials
 

HTML canvas putImageData() Method

<Canvas Object

Beispiel

Der folgende Code kopiert die Pixeldaten für ein angegebenes Rechteck auf der Leinwand mit getImageData() , und setzen Sie dann die Bilddaten zurück auf die Leinwand mit putImageData() :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
Versuch es selber "

Browser-Unterstützung

Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode vollständig unterstützt.

Methode
putImageData() 4.0 9.0 3.6 4.0 10.1

Definition und Verwendung

Die putImageData() Methode setzt die Bilddaten (from a specified ImageData object) zurück auf die Leinwand.

Tip: Lesen Sie über die getImageData() Methode , die Kopien der Pixeldaten für einen bestimmten Rechteck auf einer Leinwand.

Tip: Lesen Sie über die createImageData() Methode , die ein neues, leeres Imagedata - Objekt erstellt.


JavaScript-Syntax

JavaScript-Syntax: context . putImageData( imgData,x,y, dirtyX,dirtyY,dirtyWidth,dirtyHeight ) ;

Parameterwerte

Parameter Beschreibung
imgData Gibt das Objekt Imagedata auf die Leinwand zurück zu setzen
x Die x-Koordinate, in Pixeln, der der oberen linken Ecke des Objekts Imagedata
y Die y-Koordinate, in Pixeln, der der oberen linken Ecke des Objekts Imagedata
dirtyX Optional. Der horizontale (x) Wert ist , in Pixel, wo das Bild auf der Leinwand zu platzieren
dirtyY Optional. Der vertikale (y) Wert ist , in Pixel, wo das Bild auf der Leinwand zu platzieren
dirtyWidth Optional. Die Breite zu verwenden, um das Bild auf der Leinwand zu zeichnen
dirtyHeight Optional. Die Höhe zu verwenden, um das Bild auf der Leinwand zu zeichnen

<Canvas Object