HTML5 canvas imagedata data 属性
 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);
定義と用法
data 属性は、imageData オブジェクトの全てのピクセル情報を含む配列を表します。
imagedata オブジェクトの全ピクセルに対しては4種類の情報（rgba 値）があります:
1. 赤色 (0-255)
2. 緑色 (0-255)
3. 青色 (0-255)
4. 0が透明で、255が完全表示であるアルファの強度（0-255）
配列に情報が保持されます。配列には、全ピクセルに対して4つの情報が含まれるので、
配列のサイズは矩形のサイズの4倍になります: width * height * 4 。
配列内の情報を変更して、putImageData メソッドを使用して、キャンバスの後ろに新しい図面を置くことができます。
JavaScript 構文
| JavaScript 構文: |
imageData.data[0]=255; |
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;
ブラウザ・サポート
data 属性は、主要な全ブラウザがサポートしています。
属性値
| 値 |
説明 |
| array |
imageData オブジェクトの rgba 値を指定する |
HTML5 canvas リファレンス
|