HTML-Leinwand Imagedata Datenattribut
Beispiele
Erstellen Sie eine 100 * 100 Pixel Imagedata-Objekten, wobei jedes Pixel auf rot gesetzt werden:
Leinwand
JavaScript:
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);
Versuchen »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari Unterstützung Imagedata Datenattribute.
Hinweis: 8 und frühere Versionen von Internet Explorer unterstützt nicht das <canvas> -Element.
Definition und Verwendung
Daten Eigenschaft gibt ein Objekt, das die Bilddaten angegeben Imagedata-Objekt enthält.
Imagedata für jedes Pixel Objekt gibt es vier Bereiche von Informationen, nämlich die Werte RGBA:
R - rot (0-255)
G - Grün (0-255)
B - blau (0-255)
A - Alphakanal (0-255; 0 ist transparent, 255 vollständig sichtbar ist)
Farb- / Alpha-Informationen in der Form eines Arrays und in den Daten gespeicherten Attributimagedata-Objekt.
Beispiel:
Die Imagedata-Objekt erste Pixel auf rot Syntax:
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;
Das Objekt Imagedata zweite Pixel wird grün Syntax:
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;
Tipp: Lesen Sie create () , getImageData () und putImageData () Methode mehr Wissen über Imagedata - Objekt zu erhalten.
JavaScript-Syntax
| JavaScript-Syntax: | imagedata .data; |
|---|