Properti data Canvas

Panduan Referensi Canvas

Definisi dan penggunaan

data Properti ini mengembalikan sebuah objek yang mengandung data gambar ImageData yang ditentukan.

Untuk setiap pixel dalam objek ImageData, ada empat informasi utama, yaitu nilai RGBA:

  • R - merah (0-255)
  • G - hijau (0-255)
  • B - biru (0-255)
  • A - channel alpha (0-255; 0 adalah transparan, 255 adalah terlihat penuh)

warna/alpha ada dalam bentuk array dan disimpan di dalam objek ImageData data pada atribut.

Contoh:

Sintaks untuk mengubah pixel pertama dalam objek ImageData menjadi merah:

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

Sintaks untuk mengubah pixel kedua dalam objek ImageData menjadi hijau:

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

Petunjuk:Lihat createImageData(),getImageData() dan putImageData() Metode, untuk mendapatkan pengetahuan lebih lanjut tentang objek ImageData.

Contoh

Buat objek ImageData ukuran 100*100 pixel di mana setiap pixel diatur menjadi merah:

Browser Anda tidak mendukung tag canvas.

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 sendiri

Sintaks

imageData.data;

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.

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

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

Panduan Referensi Canvas