Beispiel
Erstellen Sie eine 100*100 Pixel Imagedata Objekt , in dem jedes Pixel rot ist, und legte sie auf die Leinwand:
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); Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| createImageData() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die createImageData() Methode erstellt ein neues, leeres Objekt Imagedata. Die neuen Objekts Pixelwerte transparent sind standardmäßig schwarz.
Für jedes Pixel in einem Imagedata Objekt gibt es vier Teile von Informationen, die RGBA-Werte:
R - Die Farbe Rot (0-255)
G - Die Farbe Grün (0-255)
B - Die Farbe Blau (0-255)
A - Der Alphakanal (0-255; 0 ist transparent und 255 vollständig sichtbar ist)
Also, transparent schwarz zeigt an : (0,0,0,0) .
Die Farbe / Alpha-Informationen wird in einem Array gehalten, und da das Array enthält vier Stücke von Informationen für jedes Pixel, die Größe des Arrays ist 4-mal die Größe des Imagedata-Objekt: Breite * Höhe * 4. (Ein einfacher Weg, um die Größe des Arrays zu finden, ist ImageDataObject.data.length zu verwenden)
Das Array enthält die Farbe / Alpha - Informationen wird in der gespeicherten data Eigentum des Imagedata - Objekt.
Tipp: Nachdem Sie die Farbe / Alpha - Informationen in dem Array manipuliert haben, können Sie die Bilddaten zurück auf die Leinwand mit dem Kopieren putImageData() Methode.
Beispiele:
Die Syntax für die Herstellung des ersten Pixels in den Imagedata-Objekt rot:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;Die Syntax für die Herstellung des zweiten Pixels in dem Objekt Imagedata grün:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;JavaScript-Syntax
Es gibt zwei Versionen des createImageData() Methode:
1. Dadurch wird eine neue Imagedata-Objekt mit den angegebenen Abmessungen (in Pixel):
| JavaScript-Syntax: | var imgData=context.createImageData(width,height); |
|---|
2. Dadurch wird eine neue Imagedata-Objekt mit den gleichen Abmessungen wie das Objekt durch anotherImageData angegeben (das die Bilddaten nicht kopiert werden):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| width | Die Breite des neuen Imagedata-Objekt in Pixel |
| height | Die Höhe des neuen Imagedata-Objekt in Pixel |
| imageData | anotherImageData Objekt |