Beispiel
Erstellen Sie ein 100 * 100 Pixel Imagedata Objekt, in dem jedes Pixel rot ist, und legt 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 vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die createImageData() Methode erzeugt ein neues leeres Objekt Imagedata. Das neue Objekt Pixelwerte transparent sind standardmäßig schwarz.
Für jedes Pixel in einem Imagedata-Objekt gibt es vier Stücke von Informationen, die RGBA-Werte:
R - Die Farbe Rot (from 0-255)
G - Die Farbe Grün (from 0-255)
B - Die Farbe Blau (from 0-255)
A - Der Alphakanal (from 0-255; 0 is transparent and 255 is fully visible)
Also, transparent schwarz zeigt an : (0,0,0,0) .
Die Farb- / Alpha-Information wird in einer Anordnung gehalten wird, und da das Array enthält 4 Teile von Informationen für jedes Pixel, wobei die Größe des Arrays ist 4-fache der Größe des Objekts Imagedata: 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 Information in der gespeicherten Daten - Eigenschaft des Objekts Imagedata.
Tip: Nachdem Sie die Farbe / Alpha - Informationen in dem Array manipuliert haben, können Sie die Bilddaten zurück auf die Leinwand mit der Kopieren putImageData() Methode.
Examples:
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 Imagedata Objekt 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 der createImageData() Methode:
1. Dies erzeugt ein neues Imagedata Objekt mit den angegebenen Abmessungen (in Pixel):
| JavaScript-Syntax: | var imgData = context . createImageData( width,height ) ; |
|---|
2. Dadurch wird ein neues Imagedata - Objekt mit den gleichen Abmessungen wie das Objekt durch anotherImageData angegeben (this does not copy the image data) werden (this does not copy the image data) :
| JavaScript-Syntax: | var imgData = context . createImageData( imageData ) ; |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| width | Die Breite des neuen Imagedata Objekts in Pixel |
| height | Die Höhe des neuen Imagedata Objekts in Pixel |
| imageData | anotherImageData Objekt |
<Canvas Object