Canvas veri özelliği

Canvas referans kitabı

Tanım ve Kullanım

data Özellik, belirtilen ImageData nesnesinin görsel verilerini içeren bir nesne döndürür.

ImageData nesnesindeki her piksel için dört yön bilgisi bulunmaktadır, yani RGBA değerleri:

  • R - kırmızı (0-255)
  • G - yeşil (0-255)
  • B - mavi (0-255)
  • A - alpha kanalı (0-255; 0 şeffaftır, 255 tamamen görünürlüdür)

color/alpha dizgi formunda bulunur ve ImageData nesnesinin data özelliklerinde.

Örnek:

ImageData nesnesindeki ilk piksele kırmızı ayarlamak için sözdizimi:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

ImageData nesnesindeki ikinci piksele yeşil ayarlamak 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;

İpucu:Bakınız createImageData(),getImageData() ve putImageData() imageData nesnesi hakkında daha fazla bilgi edinmek için yöntemler.

Örnek

Her bir pikseli kırmızıya ayarlanmış 100*100 piksel ImageData nesnesi oluşturun:

Tarayıcınız canvas etiketini desteklememektedir.

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);

Kişisel olarak deneyin

Sözdizimi

imageData.data;

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.

Canvas referans kitabı