Przykład
Poniższy kod kopiuje dane pikseli w określonym prostokącie na płótnie z getImageData() , a następnie umieścić dane obrazu z powrotem na płótnie z 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 " Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| putImageData() | tak | 9,0 | tak | tak | tak |
Definicja i Wykorzystanie
putImageData() Metoda kładzie danych obrazu (od określonego obiektu imageData) z powrotem na płótno.
Wskazówka: Czytaj o getImageData() metoda, która kopiuje dane pikseli dla określonego prostokąta na płótnie.
Wskazówka: Czytaj o createImageData() metodę, 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ędna x, w pikselach lewym górnym rogu obiektu imageData |
| y | Współrzędna y, w pikselach lewym górnym rogu obiektu imageData |
| dirtyX | Opcjonalny. The (x) Wartość poziome, w pikselach, gdzie umieścić obraz na płótnie |
| dirtyY | Opcjonalny. The (y) Wartość pionowe, w pikselach, gdzie umieścić 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 |