Latest web development tutorials

HTML canvas createImageData () metode

Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML

contoh

Buat 100 * 100 piksel objek imageData di mana setiap pixel berwarna merah, kemudian meletakkannya di kanvas:

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

Coba »

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome dan Safari dukungan createImageData () metode.

Catatan: 8 dan versi sebelumnya dari Internet Explorer tidak mendukung <canvas> elemen.

Definisi dan Penggunaan

Metode createImageData () menciptakan kosong objek imageData baru. Nilai default dari objek pixel transparan hitam baru.

ImageData objek untuk setiap pixel, ada empat bidang informasi, yaitu nilai-nilai RGBA:

R - red (0-255)
G - Hijau (0-255)
B - biru (0-255)
A - channel alpha (0-255; 0 transparan, 255 adalah sepenuhnya terlihat)

Dengan demikian, representasi hitam transparan (0,0,0,0).

Warna / informasi alpha dalam bentuk array, dan karena array berisi empat potongan informasi untuk setiap pixel, sehingga ukuran array adalah objek imageData empat kali: lebar * tinggi * 4. (Ukuran Array diperoleh dengan cara yang lebih sederhana adalah dengan menggunakan ImageDataObject.data.length)

Ini berisi warna / alpha informasi imageData array yang disimpan dalam objek Data properti.

Tip: array lengkap informasi warna / alpha dalam operasi, Anda dapat menggunakan putImageData () metode data gambar disalin kembali ke kanvas.

contoh:

The imageData keberatan pixel pertama yang sintaks merah:

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Objek imageData pixel kedua ternyata sintaks hijau:

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

sintaks JavaScript

Ada dua versi dari createImageData () metode:

1. menentukan ukuran (dalam pixel) untuk membuat objek imageData baru:

sintaks JavaScript: var imgData = konteks .createImageData (lebar,tinggi);

2. Buat sama dengan ukuran benda lain imageData imageData baru objek tertentu (data gambar tidak akan disalin):

sintaks JavaScript: var imgData = konteks .createImageData (imageData);

Nilai parameter

参数 描述
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
imageData 另一个 ImageData 对象。

Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML