HTML canvas atribut data

Panduan Referensi HTML5 Canvas

Definisi dan penggunaan

data Atribut mengembalikan objek yang mengandung data gambar objek ImageData yang ditentukan.

Untuk setiap pixel di dalam objek ImageData, ada empat informasi, 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:

Syntaks untuk menjadikan pixel pertama di 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;

Syntaks untuk menjadikan pixel kedua di dalam objek ImageData menjadi biru:

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 tentang objek ImageData.

contoh

Membuat objek ImageData 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

Sintaksis

imageData.data;

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang 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 HTML5 Canvas