HTML canvas data eigenschap

HTML5 Canvas reference manual

Definitie en gebruik

data Eigenschappen retourneren een object dat de afbeeldingsgegevens van het opgegeven ImageData object bevat.

Voor elk pixel in het ImageData object bestaan er vier soorten informatie, namelijk de RGBA-waarden:

  • R - rood (0-255)
  • G - groen (0-255)
  • B - blauw (0-255)
  • A - alpha kanaal (0-255; 0 is transparant, 255 is volledig zichtbaar)

color/alpha bestaat als een array en wordt opgeslagen in het ImageData object van data in eigenschappen.

Voorbeeld:

De syntaxis om de eerste pixel van het ImageData object rood te maken:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

De syntaxis om de tweede pixel van het ImageData object groen te maken:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Tip:Zie ook createImageData(),getImageData() en putImageData() Methoden om meer te weten te komen over het ImageData object.

Voorbeeld

Maak een ImageData object van 100*100 pixels aan, waarbij elke pixel rood is ingesteld:

Uw browser ondersteunt de canvas tag niet.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=c.createImageData(100,100);
voor (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);

Try it yourself

Syntax

imageData.data;

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

HTML5 Canvas reference manual