Canvas createImageData() 方法
示例
建立一個 100*100 畫素的 ImageData 物件，其中每個畫素都是紅色
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(100, 100);
for (let 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() 方法建立一個新的空白 ImageData 物件。新物件的畫素值是透明黑色：RGBA(0, 0, 0, 0)。
ImageData 物件中的每個畫素有四條資訊，即 RGBA 值
R - 紅色（0-255）
G - 綠色（0-255）
B - 藍色（0-255）
A - Alpha 通道（0-255；0 表示透明，255 表示完全可見）
顏色/alpha 資訊儲存在一個數組中，其大小是 ImageData 物件大小的 4 倍：寬度*高度*4。
包含顏色/alpha 資訊的陣列儲存在 ImageData 物件的 data 屬性中。
示例
將 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;
語法
createImageData() 方法有兩個版本
建立具有指定尺寸的新 ImageData 物件
| context.createImageData(width, height) |
建立與另一個 ImageData 物件具有相同尺寸的新 ImageData 物件（不復制 ImageData 物件）
| context.createImageData(imageData) |
引數值
| 引數 | 描述 |
|---|---|
| width | 新 ImageData 物件的寬度（以畫素為單位） |
| height | 新 ImageData 物件的高度（以畫素為單位） |
| imageData | 另一個 ImageData 物件 |
返回值
| 一個 ImageData 物件 |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
createImageData() 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
