HTML canvas ImageData data 屬性

Canvas 對象

建立 100*100 像素的 ImageData 對象，其中每個像素均被設定為紅色：

YourbrowserdoesnotsupporttheHTML5canvastag.

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

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支援 ImageData

data 屬性。

<b>注意：</b>Internet Explorer 8 及之前的版本不支援 &lt;canvas&gt; 元素。

data 屬性傳回一個對象，該對象包含指定的 ImageData 對象的圖像資料。

對于 ImageData 對象中的每個像素，都存在着四方面的資訊，即 RGBA 值：

R - 紅色（0-255）

G - 綠色（0-255）

B - 藍色（0-255）

A - alpha 通道（0-255; 0 是透明的，255 是完全可見的）

color/alpha 資訊以數組形式存在，并存儲于 ImageData 對象的 data 屬性中。

<b>執行個體：</b>

把 ImageData 對象中的第一個像素變為紅色的文法：

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;

imgData.data[1]=0;

imgData.data[2]=0;

imgData.data[3]=255;

把 ImageData 對象中的第二個像素變為綠色的文法：

imgData.data[4]=0;

imgData.data[5]=255;

imgData.data[6]=0;

imgData.data[7]=255;

提示：請參閱 createImageData()、

getImageData() 和

putImageData() 方法，以獲得更多關于 ImageData 對象的知識。

JavaScript 文法：

imageData.data;