HTML canvas createImageData() method

คู่มืออ้างอิง HTML5 Canvas

Paglilinaw at paggamit

createImageData() Ang paraan ay gumawa ng bagong walang laman na ImageData object. Ang default na halaga ng pixel ng bagong object ay transparent black.

Para sa bawat pixel ng ImageData object, mayroong apat na pangunahing impormasyon, na ang RGBA na halaga:

  • R - pulang (0-255)
  • G - berde (0-255)
  • B - asul (0-255)
  • A - alpha 通道 (0-255; 0 ayon sa transparent, 255 ayon sa ganap na nakikita)

Kaya, ang transparent black ay (0,0,0,0).

color/alpha ay nasa anyo ng array, at dahil ang array ay naglalaman ng apat na impormasyon ng bawat pixel, ang laki ng array ay apat na beses na laki ng ImageData object. (May mas madaling paraan para makakuha ng laki ng array, na gumamit ng ImageDataObject.data.length)

Ang array na naglalaman ng color/alpha ay nakatago sa data property.

Mga paalala:Pagkatapos ng operasyon sa color/alpha ng array, maaari mong gamitin ang putImageData() Ang method na ito ay kumopya ng mga datos ng imahen pabalik sa canvas.

Halimbawa:

Ang sintaksis na ito ay nagbabago ng unang pixel ng ImageData object na pula:

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

Ang sintaksis na ito ay nagbabago ng ikalawang pixel ng ImageData object na pula:

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

Mga halimbawa

Lumikha ng 100*100 pixel na ImageData object kung saan ang bawat pixel ay pula, at ilagay ito sa canvas:

Hindi suporta ng iyong browser ang HTML5 canvas tag.

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

Subukan nang personal

Sintaksis

Mayroon dalawang bersyon ng createImageData() method:

1. สร้าง ImageData ตัวใหม่ด้วยขนาดที่กำหนด (ด้วยพิกเซล):

var imgData=context.createImageData(width,height);

2. สร้าง ImageData ตัวใหม่ขนาดเท่ากับ ImageData ตัวอื่นที่กำหนด (จะไม่คัดลอกข้อมูลรูปภาพ):

var imgData=context.createImageData(imageData);

ค่าประกาย

ประกาย คำอธิบาย
width ความกว้างของ ImageData ตัว ด้วยพิกเซล
height ความสูงของ ImageData ตัว ด้วยพิกเซล
imageData อีก ImageData ตัว

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางนี้ระบุรุ่นที่สนับสนุนคุณสมบัตินี้เต็มที่แรก

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

หมายเหตุ：Internet Explorer 8 และรุ่นเก่าของมันไม่สนับสนุนสิ่งที่ชื่อว่า <canvas> อิเล็กทรอนิกส์

คู่มืออ้างอิง HTML5 Canvas