HTMLキャンバスのImageDataデータ属性

例

各ピクセルが赤に設定されている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);

»をお試しください

ブラウザのサポート

Internet Explorer 9の、Firefoxの、オペラ、ChromeとSafariのサポートのImageDataデータ属性。

注：のInternet Explorer 8およびそれ以前のバージョンでは、<キャンバス>要素をサポートしていません。

定義と使用法

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

各画素についてのImageDataオブジェクト、情報の4分野、すなわちRGBA値があります。

R - 赤（0-255）
G - グリーン（0-255）
B - 青（0-255）
- アルファチャンネル（0〜255; 0は透明で、255は完全に見えています）

配列の形式でカラー/アルファ情報とデータ属性の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（）、 getImageData（）とputImageData（）のImageDataオブジェクトの詳細な知識を得るための方法を。

JavaScriptシンタックス

JavaScriptシンタックス：	画像データは.data;

HTMLキャンバスリファレンスマニュアル

前：HTMLキャンバスのImageData heightプロパティ

次へ：HTMLキャンバスcreateImageData（）メソッド