HTML-doek ImageData data Eiendom
Voorbeeld
Skep 'n 100*100 piksels ImageData-voorwerp waar elke pixel op die kleur rooi gestel is:
Canvas
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (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);
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
| Property | |||||
|---|---|---|---|---|---|
| data | Yes | 9.0 | Yes | Yes | Yes |
Definisie en gebruik
Die data-eienskap gee 'n objek terug wat beelddata van die gespesifiseerde ImageData-objek bevat.
Vir elke pixel in 'n ImageData-voorwerp is daar vier stukke inligting, die RGBA-waardes:
R - Die kleur rooi (van 0-255)
G - Die kleur groen (van 0-255)
B - Die kleur blou (van 0-255)
A - Die alfakanaal (van 0-255; 0 is deursigtig en 255 is volledig sigbaar)
Die kleur/alfa-inligting word in 'n skikking gehou en word in die data-eienskap van die ImageData-objek gestoor.
Voorbeelde:
Die sintaksis om die eerste pixel in die ImageData-voorwerp rooi te maak:
imgData=ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;
Die sintaksis om die tweede pixel in die ImageData-voorwerp groen te maak:
imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;
Wenk: Kyk na createImageData() , getImageData() , en putImageData() om meer oor die ImageData-objek te wete te kom.
JavaScript-sintaksis
| JavaScript-sintaksis: | beeldData .data; |
|---|
❮ HTML-doekverwysing