HTMLキャンバスcreateImageData()メソッド

❮HTMLキャンバスリファレンス

すべてのピクセルが赤である100 * 100ピクセルのImageDataオブジェクトを作成し、それをキャンバスに配置します。

あなたのブラウザはHTML5canvastagをサポートしていません。

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キャンバスリファレンス