HTMLキャンバスcreateImageData()メソッド
例
すべてのピクセルが赤である100 * 100ピクセルのImageDataオブジェクトを作成し、それをキャンバスに配置します。
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (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);
ブラウザのサポート
表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。
Method | |||||
---|---|---|---|---|---|
createImageData() | Yes | 9.0 | Yes | Yes | Yes |
定義と使用法
createImageData()メソッドは、新しい空白のImageDataオブジェクトを作成します。新しいオブジェクトのピクセル値は、デフォルトでは透明な黒です。
ImageDataオブジェクトのすべてのピクセルには、RGBA値の4つの情報があります。
R-赤色(0-255から)
G-緑色(0-255から)
B-青色(0-255から)
A-アルファチャネル(0-255から; 0は透明、255は完全に見える)
したがって、透明な黒は(0,0,0,0)を示します。
カラー/アルファ情報は配列に保持され、配列にはピクセルごとに4つの情報が含まれているため、配列のサイズはImageDataオブジェクトのサイズの4倍(width * height * 4)になります。(配列のサイズを見つける簡単な方法は、ImageDataObject.data.lengthを使用することです)
色/アルファ情報を含む配列 は、ImageDataオブジェクトのdataプロパティに格納されます。
ヒント:配列内の色/アルファ情報を操作した後、 putImageData()メソッドを使用して画像データをキャンバスにコピーして戻すことができます 。
例:
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構文
createImageData()メソッドには2つのバージョンがあります。
1.これにより、指定された寸法(ピクセル単位)で新しいImageDataオブジェクトが作成されます。
JavaScript構文: | var imgData = context .createImageData(width、height); |
---|
2.これにより、anotherImageDataで指定されたオブジェクトと同じサイズの新しいImageDataオブジェクトが作成されます(これは画像データをコピーしません)。
JavaScript syntax: | var imgData=context.createImageData(imageData); |
---|
パラメータ値
Parameter | Description |
---|---|
width | The width of the new ImageData object, in pixels |
height | The height of the new ImageData object, in pixels |
imageData | anotherImageData object |
❮HTMLキャンバスリファレンス