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