En son web geliştirme öğreticiler
 

HTML canvas createImageData() Method

<Tuval Nesne

Örnek

Her piksel kırmızı, 100 * 100 piksel ImageData nesnesi oluşturun ve tuval üzerine koydu:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 yöntemini destekleyen ilk tarayıcı sürümü belirtin.

Yöntem
createImageData() 4.0 9.0 3.6 4.0 10.1

Tanımı ve Kullanımı

createImageData() metodu yeni, boş bir ImageData nesne oluşturur. Yeni nesnenin piksel değerleri varsayılan olarak şeffaf siyah.

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)

Yani, şeffaf siyah gösterir: (0,0,0,0) .

Renk / alfa bilgiler bir dizi içinde tutulur ve dizi, her piksel için bilgi 4 parça içerir, çünkü dizinin büyüklüğü ImageData nesnesinin 4 kez boyutu: genişlik x yükseklik * 4. (Dizinin büyüklüğü bulmak için daha kolay bir yolu, ImageDataObject.data.length kullanmaktır)

Renk / alfa bilgilerini içeren dizi depolanan veriler ImageData nesnesinin özelliği.

Tip: Eğer dizideki renk / alfa bilgi manipüle sonra, tuvale üzerine geri görüntü verilerini kopyalayabilirsiniz putImageData() yöntemiyle.

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;

JavaScript sözdizimi

Iki sürümü vardır createImageData() yöntemiyle:

1. Bu (piksel) belirtilen boyutlara sahip yeni ImageData nesnesi yaratır:

JavaScript sözdizimi: var imgData = context . createImageData( width,height ) ;

2. Bu anotherImageData tarafından belirlenen nesne olarak aynı boyutlara sahip bir yeni ImageData nesnesi yaratır (this does not copy the image data) :

JavaScript sözdizimi: var imgData = context . createImageData( imageData ) ;

Parametre Değerleri

Parametre Açıklama
width piksel yeni ImageData nesnesinin genişliği,
height piksel yeni ImageData nesnenin yüksekliği,
imageData anotherImageData nesnesi
<Tuval Nesne