HTML- Canvas - ImageData -Dateneigenschaft
Beispiel
Erstellen Sie ein 100 * 100 Pixel großes ImageData-Objekt, bei dem jedes Pixel auf die Farbe Rot eingestellt ist:
Segeltuch
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);
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| data | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die Eigenschaft data gibt ein Objekt zurück, das Bilddaten des angegebenen ImageData-Objekts enthält.
Für jedes Pixel in einem ImageData-Objekt gibt es vier Informationen, die RGBA-Werte:
R - Die Farbe Rot (von 0-255)
G - Die Farbe Grün (von 0-255)
B - Die Farbe Blau (von 0-255)
A - Der Alpha-Kanal (von 0-255; 0 ist transparent und 255 ist vollständig sichtbar)
Die Farb-/Alpha-Informationen werden in einem Array gespeichert und in der data-Eigenschaft des ImageData-Objekts gespeichert.
Beispiele:
Die Syntax, um das erste Pixel im ImageData-Objekt rot zu machen:
imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;
Die Syntax, um das zweite Pixel im ImageData-Objekt grün zu machen:
imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;
Tipp: Sehen Sie sich createImageData() , getImageData() und putImageData() an, um mehr über das ImageData-Objekt zu erfahren.
JavaScript-Syntax
| JavaScript-Syntax: | Bilddaten .data ; |
|---|
❮ Canvas-Objekt