HTML canvas ImageData data プロパティ

例

全ピクセルが赤に設定されている 100*100 ピクセルの ImageData オブジェクトを作成します：

Canvas

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

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、プロパティを完全にサポートした最初のブラウザ・バージョンを指定しています。

プロパティ
data	Yes	9.0	Yes	Yes	Yes

定義と用法

data プロパティは、指定の ImageData オブジェクトの画像データを含むオブジェクトを返します。

ImageData オブジェクト内のすべてのピクセルには、4 つ情報（RGBA 値）があります：

R - 赤 (0 ～ 255)
G - 緑 (0 ～ 255)
B - 青 (0 ～ 255)
A - αチェンネル (0 ～ 255；0 は透明で、255 は完全不透明)

カラー/アルファ情報は、配列として mageData オブジェクトの 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 オブジェクトの詳細を学ぶためには、createImageData()、 getImageData()、putImageData() をご覧ください。

JavaScript 構文

JavaScript 構文：	imageData.data;

HTML Canvas リファレンス