Beispiel
Der folgende Code kopiert die Pixeldaten für einen festgelegten 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 in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| putImageData() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die putImageData() Methode setzt die Bilddaten (von einem bestimmten Imagedata - Objekt) zurück auf die Leinwand.
Tipp: Lesen Sie über das getImageData() Methode , die Kopien der Pixeldaten für einen bestimmten Rechteck auf einer Leinwand.
Tipp: Lesen Sie über die createImageData() Methode , die eine neue, leere 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 von der oberen linken Ecke des Objekts Imagedata |
| y | Die Y-Koordinate in Pixeln von der oberen linken Ecke des Objekts Imagedata |
| dirtyX | Optional. Die horizontale (x) Wert, in Pixeln, wobei das Bild auf der Leinwand zu platzieren |
| dirtyY | Optional. Die vertikale (y) Wert, in Pixeln, wobei das Bild auf der Leinwand zu platzieren |
| dirtyWidth | Optional. Die Breite verwenden, um das Bild auf der Leinwand zu zeichnen |
| dirtyHeight | Optional. Die Höhe zu verwenden, um das Bild auf der Leinwand zu zeichnen |