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

HTML5 Canvas リファレンスマニュアル

定義と用法

createImageData() 新しい空白のImageDataオブジェクトを作成するメソッド。新しいオブジェクトのデフォルトのピクセル値は透明な黒です。

ImageDataオブジェクトの各ピクセルには、RGBA値の4つの情報があります：

  • R - 赤色（0-255）
  • G - 緑色（0-255）
  • B - 青色（0-255）
  • A - アルファチャンネル（0-255；0は透明で、255は完全に見える）

したがって、透明な黒は(0,0,0,0)を意味します。

color/alphaは配列形式で存在し、配列には各ピクセルの4つの情報が含まれており、配列のサイズはImageDataオブジェクトの4倍です。（配列のサイズを取得するより簡単な方法は、ImageDataObject.data.lengthを使用するものです）

color/alpha情報を含む配列は、ImageDataオブジェクトの data 属性で。

ヒント：color/alpha情報の配列を操作した後、以下を使用できます： putImageData() このメソッドは、画像データをキャンバスにコピーします。

例：

この構文は、ImageDataオブジェクトの第1ピクセルを赤色にします：

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;

例

100x100ピクセルのImageDateオブジェクトを作成し、各ピクセルが赤色であれば、それをキャンバスに配置します：

ブラウザはHTML5のcanvasタグをサポートしていません。

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() メソッドには2つのバージョンがあります：

1. 指定されたサイズ（ピクセルで計算）の新しい ImageData オブジェクトを作成します：

var imgData=context.createImageData(width,height);

2. 指定されたサイズ（ピクセルで計算）の新しい ImageData オブジェクトを作成します（画像データをコピーしません）：

var imgData=context.createImageData(imageData);

パラメータの値

パラメータ 説明
width ImageData オブジェクトの幅（ピクセルで計算）。
height ImageData オブジェクトの高さ（ピクセルで計算）。
imageData 別の ImageData オブジェクト。

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注：Internet Explorer 8 以降のバージョンでは <canvas> 要素をサポートしていません。

HTML5 Canvas リファレンスマニュアル