Latest web development tutorials

createImageData（）メソッドキャンバスHTML

HTMLキャンバスリファレンスマニュアル HTMLキャンバスリファレンスマニュアル

例

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

YourbrowserdoesnotsupporttheHTML5canvastag。

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);

»をお試しください

ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9の、Firefoxの、オペラ、ChromeとSafariのサポートcreateImageData（）メソッド。

注：のInternet Explorer 8およびそれ以前のバージョンでは、<キャンバス>要素をサポートしていません。

定義と使用法

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

各画素についてのImageDataオブジェクト、情報の4分野、すなわちRGBA値があります。

R - 赤（0-255）
G - グリーン（0-255）
B - 青（0-255）
- アルファチャンネル（0〜255; 0は透明で、255は完全に見えています）

このように、透明な黒の表現（0,0,0,0）。

配列の形式でカラー/アルファ情報、および配列のサイズが4倍のImageDataオブジェクトであるので、配列には、各画素ごとに4つの情報が含まれているので：幅*高さ* 4を。 （もっと簡単な方法を取得した配列のサイズがImageDataObject.data.lengthを使用することです）

これは、オブジェクトの中に格納されている色/アルファのImageDataアレイ情報が含まれたデータのプロパティを。

ヒント：操作中の色/アルファ情報の完全な配列は、あなたが使用できる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 =コンテキスト.createImageData（幅、高さ）;

2.（画像データはコピーされません）別のオブジェクトのサイズと同じImageDataを新しいのImageData指定されたオブジェクトを作成します。

JavaScriptシンタックス： VAR imgData =コンテキスト.createImageData（画像データ）;

パラメータ値

参数 描述
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
imageData 另一个 ImageData 对象。

HTMLキャンバスリファレンスマニュアル HTMLキャンバスリファレンスマニュアル