HTML canvas createImageData() -menetelmä

HTML5 Canvas käyttöohje

Määrittely ja käyttö

createImageData() Metodi luo uuden tyhjän ImageData-olion. Uuden olion oletus像素arvo on läpinäkyvä musta.

Jokaisella ImageData-olion kuvapikselillä on neljä tietoaspektia, nimittäin RGBA-arvot:

  • R - punainen (0-255)
  • G - vihreä (0-255)
  • B - sininen (0-255)
  • A - alpha-kanava (0-255; 0 on läpinäkyvä, 255 on täysin näkyvä)

Näin ollen, läpinäkyvä musta tarkoittaa (0,0,0,0).

color/alpha on taulukkomuodossa, ja koska taulukko sisältää jokaisen pikselin neljä tietoa, taulukon koko on ImageData-objektin neljä kertaa suurempi. (On olemassa yksinkertaisempi tapa saada taulukon koko, käyttämällä ImageDataObject.data.length)

Color/alpha-tietojen sisältävä taulukko tallennetaan ImageData-objektin data ominaisuuksissa.

Vinkki:Kun color/alpha-tiedot ovat käsitelty, voit käyttää putImageData() Metodi kopioi kuvatiedot takaisin taululle.

Esimerkki:

Tämä syntaksi muuttaa ImageData-objektin ensimmäisen pikselin punaiseksi:

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

Tämä syntaksi muuttaa ImageData-objektin toisen pikselin punaiseksi:

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

Esimerkki

Luo 100*100 pikselin ImageData-objekti, jossa jokainen pikseli on punainen, ja lisää se taululle:

Selaimesi ei tue HTML5 canvas -tagia.

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);

Kokeile itse

Syntaksi

On olemassa kaksi versiota createImageData() -metodia:

1. Luo uusi ImageData-objekti määritetyn kohteen (kuvapisteinä) perusteella:

var imgData=context.createImageData(width,height);

2. Luo uusi ImageData-objekti, joka on saman kokoinen kuin määritetty toinen ImageData-objekti (ei kopioi kuvadataa):

var imgData=context.createImageData(imageData);

Parametrin arvo

Parametri Kuvaus
width ImageData-objektin leveys, kuvapisteinä.
height ImageData-objektin korkeus, kuvapisteinä.
imageData Toinen ImageData-objekti.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.

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

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas>-elementtiä.

HTML5 Canvas käyttöohje