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:

Il tuo browser non supporta il tag canvas.

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);

Prova da solo

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>.