Canvas ImageData data 屬性
示例
建立一個 100*100 畫素的 ImageData 物件，每個畫素都設定為紅色
畫布
JavaScript
const c = document.getElementById("myCanvas");
const ctx = c.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);
自己動手試一試 »
描述
data 屬性返回一個包含 ImageData 物件影像資料的物件。
ImageData 物件中的每個畫素有四條資訊，即 RGBA 值
R - 紅色（0-255）
G - 綠色（0-255）
B - 藍色（0-255）
A - Alpha 通道（0-255；0 表示透明，255 表示完全可見）
顏色/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;
語法
| imageData.data |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
imageData.data 在所有現代瀏覽器中均受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
