HTML-doek createImageData() Metode
Voorbeeld
Skep 'n 100*100 piksels ImageData-voorwerp waar elke pixel rooi is, en plaas dit op die doek:
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 metode ten volle ondersteun.
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | Yes | 9.0 | Yes | Yes | Yes |
Definisie en gebruik
Die createImageData() metode skep 'n nuwe, leë ImageData-objek. Die nuwe voorwerp se pixelwaardes is by verstek deursigtige swart.
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)
Dus, deursigtige swart dui aan: (0,0,0,0).
Die kleur/alfa-inligting word in 'n skikking gehou, en aangesien die skikking 4 stukke inligting vir elke pixel bevat, is die skikking se grootte 4 keer die grootte van die ImageData-voorwerp: breedte*hoogte*4. ('n Makliker manier om die grootte van die skikking te vind, is om ImageDataObject.data.length te gebruik)
Die skikking wat die kleur/alfa-inligting bevat, word in die data- eienskap van die ImageData-voorwerp gestoor.
Wenk: Nadat jy die kleur/alfa-inligting in die skikking gemanipuleer het, kan jy die beelddata terugkopieer op die doek met die putImageData() metode.
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;
JavaScript-sintaksis
Daar is twee weergawes van die createImageData() metode:
1. Dit skep 'n nuwe ImageData-objek met die gespesifiseerde afmetings (in pixels):
| JavaScript-sintaksis: | var imgData= konteks .createImageData( width,height ); |
|---|
2. Dit skep 'n nuwe ImageData-objek met dieselfde afmetings as die voorwerp gespesifiseer deur anotherImageData (dit kopieer nie die beelddata nie):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
Parameterwaardes
| Parameter | Description |
|---|---|
| width | The width of the new ImageData object, in pixels |
| height | The height of the new ImageData object, in pixels |
| imageData | anotherImageData object |
❮ HTML-doekverwysing