Proprietà HTML canvas data
Definizione e uso
data
La proprietà restituisce un oggetto che contiene i dati dell'ImageData specificato.
Per ogni pixel dell'oggetto ImageData, ci sono quattro tipi di informazioni, ovvero i valori RGBA:
- R - rosso (0-255)
- G - verde (0-255)
- B - blu (0-255)
- A - canale alpha (0-255; 0 è trasparente, 255 è completamente visibile)
I valori RGBA di ogni pixel dell'oggetto ImageData sono rappresentati come un array e memorizzati nell'oggetto ImageData, in questo ordine: data
proprietà.
Esempio:
Ecco la sintassi per cambiare il primo pixel dell'oggetto ImageData al rosso:
imgData=ctx.createImageData(100,100); imgData.data[0]=255; imgData.data[1]=0; imgData.data[2]=0; imgData.data[3]=255;
Ecco la sintassi per cambiare il secondo pixel dell'oggetto ImageData al verde:
imgData=ctx.createImageData(100,100); imgData.data[4]=0; imgData.data[5]=255; imgData.data[6]=0; imgData.data[7]=255;
Suggerimento:Vedi createImageData(),getImageData() e putImageData() Metodi, per ottenere più informazioni sull'oggetto ImageData.
Esempio
Crea un oggetto ImageData di 100*100 pixel, con ogni pixel impostato su rosso:
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);
Sintassi
imageData.data;
Supporto dei browser
I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.