例
作成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() | はい | 9.0 | はい | はい | はい |
定義と使用法
createImageData()メソッドは、新しい空のImageDataオブジェクトを作成します。 新しいオブジェクトのピクセル値はデフォルトで透明な黒です。
ImageDataオブジェクト内のすべてのピクセルのための4つの情報、RGBA値があります。
R - （0〜255）赤色
G - （0〜255）カラーグリーン
B - （0〜255）カラーブルー
-アルファチャンネル（0〜255; 0は透明であり、255は完全に見えています）
だから、透明な黒は示しています(0,0,0,0)
カラー/アルファ情報は、アレイ内に保持され、アレイは画素毎に情報の4個が含まれているので、配列のサイズはのImageDataオブジェクトの4倍の大きさ：幅*高さ* 4。 （配列のサイズを見つけるための簡単な方法は、ImageDataObject.data.lengthを使用することです）
カラー/アルファ情報を含む配列に格納されdataのImageDataオブジェクトのプロパティ。
ヒント：あなたは、アレイ内のカラー/アルファ情報を操作した後、あなたが戻ってキャンバスに画像データをコピーすることができputImageData()メソッド。
例：
ImageDataオブジェクトの赤で最初のピクセルを作成するための構文は次のとおりです。
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;ImageDataオブジェクトの緑に第2の画素を作るための構文は次のとおりです。
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;JavaScriptの構文
2つのバージョンがありcreateImageData()メソッドは：
1.これが（ピクセル単位で）指定された大きさで新しいのImageDataオブジェクトを作成します。
| JavaScriptシンタックス： | var imgData=context.createImageData(width,height); |
|---|
2.これはanotherImageDataによって指定されたオブジェクトと同じ大きさ（これは、画像データをコピーしません）を使用して新しいのImageDataオブジェクトを作成します。
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
パラメーター値
| パラメーター | 説明 |
|---|---|
| width | ピクセル単位で新しいのImageDataオブジェクトの幅、 |
| height | ピクセル単位で新しいのImageDataオブジェクトの高さ、 |
| imageData | anotherImageDataオブジェクト |