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 對象,其中每個像素都是紅色的,然后把它放到畫布上:
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> 元素。