HTML canvas data attribute

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

Paglilinang at paggamit

data Ang mga katangian ay binibigay ng isang bagay na naglalaman ng mga datos ng image ng tinukoy na ImageData object.

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

  • R - pulang kulay (0-255)
  • G - berde (0-255)
  • B - asul (0-255)
  • A - alpha channel (0-255; 0 ay malinaw, 255 ay ganap na nakikita)

color/alpha ay nasa anyo ng array at inilagay sa ImageData object na data sa mga katangian.

Halimbawa:

Ang sintaks ng pagbabagong kaalaman ng unang pixel sa ImageData object na naging pulang kulay:

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

Ang sintaks ng pagbabagong kaalaman ng ikalawang pixel sa ImageData object na naging berde:

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

Mga tagubilin:Tingnan ang createImageData()、getImageData() at putImageData() Mga paraan, upang makilala pa ang ImageData object.

Mga halimbawa

Lumikha ng 100*100 pixel na ImageData object kung saan ang bawat pixel ay naging pulang kulay:

Ang iyong browser ay hindi sumusuporta sa tag na 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);

ทดลองด้วยตัวเอง

การใช้งาน

imageData.data;

การสนับสนุนโปรแกรมบราวเซอร์

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

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