HTML canvas createImageData() 方法

定義和用法

createImageData() 方法創建新的空白 ImageData 對象。新對象的默認像素值 transparent black。

對于 ImageData 對象中的每個像素,都存在著四方面的信息,即 RGBA 值:

  • R - 紅色 (0-255)
  • G - 綠色 (0-255)
  • B - 藍色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的,255 是完全可見的)

因此 ,transparent black 表示 (0,0,0,0)。

color/alpha 以數組形式存在,并且既然數組包含了每個像素的四條信息,數組的大小是 ImageData 對象的四倍。(獲得數組大小有更簡單的辦法,就是使用 ImageDataObject.data.length)

包含 color/alpha 信息的數組存儲于 ImageData 對象的 data 屬性中。

提示:在操作完成數組中的 color/alpha 信息之后,您可以使用 putImageData() 方法將圖像數據拷貝回畫布上。

例子:

該語法把 ImageData 對象中的第一個像素變為紅色:

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

該語法把 ImageData 對象中的第二個像素變為紅色:

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

實例

創建 100*100 像素的 ImageData 對象,其中每個像素都是紅色的,然后把它放到畫布上:

Your browser does not support the 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);

親自試一試

語法

有兩個版本的 createImageData() 方法:

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> 元素。