Przykład
Kod poniżej kopii dane pikseli dla określonej prostokąta na płótnie getImageData() , a następnie umieścić dane obrazu z powrotem na płótnie 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);
} Spróbuj sam " Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| putImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10,1 |
Definicja i Wykorzystanie
putImageData() Sposób przekazuje dane obrazu (from a specified ImageData object) z powrotem na płótnie.
Tip: Czytaj o getImageData() metoda, która kopiuje dane pikseli dla określonego prostokąta na płótnie.
Tip: Czytaj o createImageData() metody, która tworzy nowy, pusty imageData obiekt.
Składnia JavaScript
| Składnia JavaScript: | context . putImageData( imgData,x,y, dirtyX,dirtyY,dirtyWidth,dirtyHeight ) ; |
|---|
wartości parametrów
| Parametr | Opis |
|---|---|
| imgData | Określa obiekt imageData umieścić z powrotem na płótnie |
| x | Współrzędnej x, w pikselach, w lewym górnym rogu obiektu Imagedata |
| y | Współrzędnej y, w pikselach, w lewym górnym rogu obiektu Imagedata |
| dirtyX | Opcjonalny. Poziomej (x) wartości w pikselach, w którym umieszczony obraz na płótnie |
| dirtyY | Opcjonalny. Pionową (y) wartości w pikselach, w którym umieszczony obraz na płótnie |
| dirtyWidth | Opcjonalny. Szerokość użyć, aby narysować obraz na płótnie |
| dirtyHeight | Opcjonalny. Wysokość użyć, aby narysować obraz na płótnie |
<Płótno Przedmiot