HTML5 canvas createImageData メソッド
 HTML5 canvas リファレンス
例
すべてのピクセルが赤である 50 * 50 ピクセルの imageData オブジェクトを作成します:
Canvas
JavaScript:
var ctx=c.getContext("2d"); var imgData=ctx.createImageData(50,50); for (i=0;
i<imgData.width*imgData.height*4;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）を持っています。
createImageData メソッドは、幅と高さを指定する 2 つのパラメータを取ることができます。
createImageData メソッドは、ただ1つのパラメータ imgData だけを取ることもできます。
これは、すべてのピクセルが透明で黒い新規のブランク imageData オブジェクトを作成しますが、
幅と高さを imageData オブジェクトに渡しても、幅と高さは同じになります。
imagedata オブジェクトの全ピクセルに対しては4種類の情報（rgba 値）があります:
1. 赤色 (0-255)
2. 緑色 (0-255)
3. 青色 (0-255)
4. 0が透明で、255が完全表示であるアルファの強度（0-255）
配列に情報が保持されます。配列には、全ピクセルに対して4つの情報が含まれるので、
配列のサイズは矩形のサイズの4倍になります: width * height * 4 。
情報を含む配列は、imageData オブジェクトの .data プロパティに格納されます。
配列内の情報を変更して、putImageData メソッドを使用して、キャンバスの後ろに新しい図面を置くことができます。
JavaScript 構文
幅と高さを指定することにより、imageDataオブジェクトを作成する:
| JavaScript 構文: |
var imgData=context.createImageData(width,height); |
パラメータとして imageData オブジェクトを渡すことにより、imageData オブジェクトを作成する:
| JavaScript 構文: |
var imgData=context.createImageData(imageData); |
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;
ブラウザ・サポート
createImageData メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
幅と高さを指定する場合:
| パラメータ |
値 |
説明 |
| width |
width |
作成する矩形エリアの幅 |
| height |
height |
成する矩形エリアの高さ |
imageData オブジェクトを渡す場合:
| パラメータ |
値 |
説明 |
| imageData |
imageDdata |
幅と高さを指定するために使用する imageData オブジェクトを指定する |
HTML5 canvas リファレンス
|