HTML canvas createImageData() metodu

HTML5 Canvas Referans Kılavuzu

Tanım ve kullanım

createImageData() Metot, yeni boş ImageData nesnesi oluşturur. Yeni nesnenin varsayılan piksel değeri şeffaf siyah.

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

  • R - kırmızı (0-255)
  • G - yeşil (0-255)
  • B - mavi (0-255)
  • A - alpha kanal (0-255; 0 şeffaftır, 255 tam olarak görülebilir)

Bu yüzden, şeffaf siyah (0,0,0,0) olarak ifade edilir。

color/alpha dizi formunda bulunur ve dizi, her pikselin dört bilgiyi içerdiğinden, dizi boyutu ImageData nesnesinin dört katıdır。（Dizi boyutunu almak için daha basit bir yol, ImageDataObject.data.length kullanmaktır）

color/alpha bilgilerini içeren dizi, ImageData nesnesinin data özelliklerinde kullanabilirsiniz.

İpucu：color/alpha bilgilerini işlemekten sonra, putImageData() Metod, resim verilerini panoya kopyalar.

Örnek:

Bu sözdizimi ImageData nesnesindeki ilk pikseli kırmızı yapar：

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

Bu sözdizimi ImageData nesnesindeki ikinci pikseli kırmızı yapar：

imgData=ctx.createImageData(100, 100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Örnek

100*100 piksel olan ve her biri kırmızı olan bir ImageData nesnesi oluşturun ve bunu panoya ekleyin：

Tarayıcınız HTML5 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

createImageData() yöntemi iki sürümdedir：

1. Belirtilen boyutlarla (piksel olarak ölçülür) yeni bir ImageData nesnesi oluşturma:

var imgData=context.createImageData(width,height);

2. Belirtilen boyutlarla (piksel olarak ölçülür) yeni bir ImageData nesnesi oluşturma (görsel veri kopyalanmaz):

var imgData=context.createImageData(imageData);

Parametre değeri

Parametre Açıklama
width ImageData nesnesinin genişliği, piksel olarak ölçülür.
height ImageData nesnesinin yüksekliği, piksel olarak ölçülür.
imageData Başka bir ImageData nesnesi.

Tarayıcı Desteği

Tablo'daki numaralar, bu özelliği ilk tam olarak destekleyen tarayıcı sürümünü belirtir.

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> ögesini desteklememektedir.

HTML5 Canvas Referans Kılavuzu