HTMLキャンバスcreateImageData（）メソッド
例
すべてのピクセルが赤である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);
ブラウザのサポート
表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
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 |
❮Canvasオブジェクト