Örnek
Her piksel kırmızı renk için ayarlanmış bir 100 * 100 piksel ImageData nesnesi oluşturun:
Tuval
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); Kendin dene " Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| data | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Tanımı ve Kullanımı
Veri özelliği belirtilen ImageData nesnesinin resim verileri içeren bir nesne döndürür.
Bir ImageData nesnesindeki her piksel için bilgi, RGBA değerleri dört adet vardır:
R - kırmızı renk (from 0-255)
G - yeşil renk (from 0-255)
B - mavi renk (from 0-255)
A - alfa kanalı (from 0-255; 0 is transparent and 255 is fully visible)
Renk / alfa bilgiler bir dizi içinde tutulur ve ImageData nesnesinin veri özelliği saklanır.
Examples:
ImageData ilk pikseli yapmak için sözdizimi kırmızı nesne:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;ImageData nesne yeşil ikinci pikseli yapmak için sözdizimi:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;Tip: bak createImageData() , getImageData() ve putImageData() ImageData nesnesi hakkında daha fazla bilgi edinmek için.
JavaScript sözdizimi
| JavaScript sözdizimi: | imageData .Data; |
|---|
<Tuval Nesne