Proprietà dei dati ImageData della tela HTML
Esempio
Crea un oggetto ImageData di 100*100 pixel in cui ogni pixel è impostato sul colore rosso:
Tela
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i+0] = 255;
imgData.data[i+1] = 0;
imgData.data[i+2] = 0;
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 10, 10);
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
| Property | |||||
|---|---|---|---|---|---|
| data | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e utilizzo
La proprietà data restituisce un oggetto che contiene i dati dell'immagine dell'oggetto ImageData specificato.
Per ogni pixel in un oggetto ImageData ci sono quattro informazioni, i valori RGBA:
R - Il colore rosso (da 0-255)
G - Il colore verde (da 0-255)
B - Il colore blu (da 0-255)
A - Il canale alfa (da 0-255; 0 è trasparente e 255 è completamente visibile)
Le informazioni sul colore/alfa sono contenute in una matrice e sono archiviate nella proprietà dei dati dell'oggetto ImageData.
Esempi:
La sintassi per rendere rosso il primo pixel nell'oggetto ImageData:
imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;
La sintassi per rendere verde il secondo pixel nell'oggetto ImageData:
imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;
Suggerimento: guarda createImageData() , getImageData() e putImageData() per saperne di più sull'oggetto ImageData.
Sintassi JavaScript
| sintassi JavaScript: | imageData .data; |
|---|
❮ Oggetto Tela