Canvas data-eigenschap
Definitie en gebruik
data De eigenschap retourneert een object dat de afbeeldingsgegevens van het opgegeven ImageData-object bevat.
Voor elk pixel in het ImageData-object bestaan er vier soorten informatie, te weten 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)
kleur/alpha bestaan in arrayvorm en worden opgeslagen in het data 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:
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);
Syntaxis
imageData.data;
Browserondersteuning
Tafelnummers vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
| 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.
