HTML-canvas ImageData -gegevens Eigenschap
Voorbeeld
Maak een 100*100 pixels ImageData-object waarbij elke pixel is ingesteld op de kleur rood:
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);
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| data | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definitie en gebruik
De eigenschap data retourneert een object dat afbeeldingsgegevens van het opgegeven ImageData-object bevat.
Voor elke pixel in een ImageData-object zijn er vier stukjes informatie, de RGBA-waarden:
R - De kleur rood (van 0-255)
G - De kleur groen (van 0-255)
B - De kleur blauw (van 0-255)
A - Het alfakanaal (van 0-255; 0 is transparant en 255 is volledig zichtbaar)
De kleur/alfa-informatie wordt bewaard in een array en wordt opgeslagen in de eigenschap data van het ImageData-object.
Voorbeelden:
De syntaxis om de eerste pixel in 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 in 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: Kijk naar createImageData() , getImageData() en putImageData() voor meer informatie over het ImageData-object.
JavaScript-syntaxis
| JavaScript-syntaxis: | imageData .data; |
|---|
❮ Canvasobject