Canvas createImageData() メソッド

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

定義と使用方法

createImageData() 新しい空白の ImageData オブジェクトを作成する方法です。新しいオブジェクトのデフォルトのピクセル値は transparent black です。

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

  • R - 赤色 (0-255)
  • G - 緑色 (0-255)
  • B - 蓝色 (0-255)
  • A - アルファチャンネル (0-255; 0 は透明、255 は完全に可視)

したがって、transparent black は (0,0,0,0) を表します。

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

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

ヒント：操作完成数组中的 color/alpha 信息之后、あなたは使用することができます putImageData() メソッドは画像データをキャンバスにコピーします。

例：

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

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

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

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

例

100*100ピクセルの ImageData オブジェクトを作成し、各ピクセルが赤色であるものをキャンバスに配置します：

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

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

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

2. 指定された別の ImageData オブジェクトのサイズと同じサイズの新しい 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> 要素をサポートしていません。

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