例
すべてのピクセルが赤である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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
createImageData()メソッドは、新しい空の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)
だから、透明な黒は示しています(0,0,0,0)
カラー/アルファ情報は、アレイ状に保持され、アレイが画素毎に情報の4個を含むので、アレイのサイズは、ImageDataをオブジェクトの4倍の大きさ：幅*高さ* 4。 （アレイのサイズを見つけるための簡単な方法は、ImageDataObject.data.lengthを使用することです）
カラー/アルファ情報を含む配列に格納されたデータのImageDataオブジェクトのプロパティ。
Tip:あなたは、アレイ内のカラー/アルファ情報を操作したら、バックキャンバス上に画像データをコピーすることができputImageData()メソッド。
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;JavaScriptの構文
2つのバージョンがありcreateImageData()メソッドは：
1.これは、ピクセル単位で指定された寸法を有する新規のImageDataオブジェクトを作成します。
| JavaScriptシンタックス： | VAR imgData = context 。 createImageData( width,height ) 。 |
|---|
2.これはanotherImageDataによって指定されたオブジェクトと同じ寸法を有する新規のImageDataオブジェクトを作成(this does not copy the image data) 。
| JavaScriptシンタックス： | VAR imgData = context 。 createImageData( imageData ) 。 |
|---|
パラメータ値
| パラメーター | 説明 |
|---|---|
| width | ピクセル単位での新しいのImageDataオブジェクトの幅、 |
| height | ピクセル単位での新しいのImageDataオブジェクトの高さ、 |
| imageData | anotherImageDataオブジェクト |
<Canvasオブジェクト