例
すべてのピクセルが赤色に設定されている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); »それを自分で試してみてください ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| data | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
データプロパティは、指定されたImageDataをオブジェクトの画像データを含むオブジェクトを返します。
ImageDataをオブジェクト内の画素毎に4つの情報、RGBA値があります。
R -赤の色(from 0-255)
G -緑色(from 0-255)
B -青色(from 0-255)
-アルファチャンネル(from 0-255; 0 is transparent and 255 is fully visible)
カラー/アルファ情報は、アレイ状に保持され、ImageDataをオブジェクトのデータプロパティに格納されます。
Examples:
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;Tip:見createImageData() getImageData()およびputImageData()のImageDataオブジェクトについての詳細を学ぶために。
JavaScriptの構文
| JavaScriptシンタックス： | imageData .DATA; |
|---|
<Canvasオブジェクト