HTML canvas createImageData()メソッド
Canvas オブジェクト例
100*100 ピクセルの ImageData オブジェクトを作成し、各ピクセルを赤色にして、それをキャンバスに配置します：
JavaScript：
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);
試してみる »
ブラウザサポート
Internet Explorer 9、Firefox、Opera、Chrome、Safari は createImageData() メソッドをサポートしています。
注意：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。
定義と用法
createImageData() メソッドは、新しい空の ImageData オブジェクトを作成します。新しいオブジェクトのデフォルトのピクセル値は transparent black です。
ImageData オブジェクトの各ピクセルには、RGBA 値という4つの情報が存在します：
R - 赤色（0-255）
G - 緑色（0-255）
B - 青色（0-255）
A - アルファチャンネル（0-255; 0 は透明、255 は完全に不透明）
したがって、transparent black は (0,0,0,0) を表します。
color/alpha 情報は配列として存在し、配列には各ピクセルの4つの情報が含まれるため、配列のサイズは ImageData オブジェクトの4倍になります：width*height*4。（配列サイズを取得するより簡単な方法は、ImageDataObject.data.length を使用することです）
color/alpha 情報を含む配列は、ImageData オブジェクトのdataプロパティに格納されます。
ヒント：配列内の color/alpha 情報を操作した後、次のメソッドを使用してputImageData()画像データをキャンバスにコピーして戻すことができます。
例：
ImageData オブジェクトの最初のピクセルを赤色に変更する構文：
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;
ImageData オブジェクトの2番目のピクセルを緑色に変更する構文：
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;
JavaScript 構文
createImageData() メソッドには2つのバージョンがあります：
1. 指定したサイズ（ピクセル単位）で新しい ImageData オブジェクトを作成します：
| JavaScript 構文： | var imgData=context.createImageData(width,height); |
|---|
2. 指定した別の ImageData オブジェクトと同じサイズの新しい ImageData オブジェクトを作成します（画像データはコピーされません）：
| JavaScript 構文： | var imgData=context.createImageData(imageData); |
|---|
パラメータ値
| パラメータ | 説明 |
|---|---|
| width | ImageData オブジェクトの幅（ピクセル単位）。 |
| height | ImageData オブジェクトの高さ（ピクセル単位）。 |
| imageData | 別の ImageData オブジェクト。 |
その他の拡張