Atribut data Canvas

Panduan Canvas

Definisi dan penggunaan

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

Untuk setiap pixel dalam objek ImageData, terdapat empat jenis informasi, yaitu nilai RGBA:

  • R - Merah (0-255)
  • G - Hijau (0-255)
  • B - Biru (0-255)
  • A - saluran alpha (0-255; 0 adalah luhur, 255 adalah terlihat sepenuhnya)

warna/alpha wujud dalam bentuk array dan disimpan di dalam objek ImageData data dalam sifat.

Contoh:

Syarat untuk mengubah piksel 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;

Syarat untuk mengubah piksel 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;

Petikan:Lihat createImageData()、getImageData() dan putImageData() Methode untuk mendapatkan maklumat lebih lanjut tentang objek ImageData.

Contoh

Cipta objek ImageData 100*100 piksel di mana setiap piksel dijadikan warna merah:

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

Cuba sendiri

Syarat

imageData.data;

Dukungan pereka

Terdapat nombor di dalam tabel yang menandakan versi pereka paling awal yang sepenuhnya mendukung sifat ini.

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

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

Panduan Canvas