HTML5 Canvas ピクセル処理

HTML5 Canvas ピクセル処理のcreateImageData()関数の使用方法、オンラインインスタンスでCanvasピクセル処理をデモ、ピクセルをキャンバスにコピーする方法、文法の定義及び属性値の詳細情報など。

アクセスできます5キャンバスの各ピクセルにアクセスできます。ImageDataオブジェクトを使用してこれを行うことができます。ImageDataオブジェクトにはピクセル配列が含まれています。この配列にアクセスして、ピクセルを操作できます。ピクセル操作が完了した後、ピクセルをキャンバスにコピーして表示する必要があります。

ImageDataオブジェクトを作成する

ImageDataオブジェクトを作成するためには2Dコンテキスト機能で実行されるcreateImageData()。これは例です:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
var width =　100;
var height =　100;
var imageData = context.createImageData(width,　height);

function createImageData()のwidthおよびheight属性は、ImageDataオブジェクトが表すピクセル領域の幅と高さ（ピクセル単位で）を設定します。上の例では、幅と高さが設定されたImageDataが作成されました。100 x 100ピクセルの面積を持つオブジェクトです。

ImageData属性

ImageDataオブジェクトには3つの属性があります:

• width

• height

• data

widthおよびheight属性はグラフィックデータ領域の幅と高さを含みます。
このdata属性はピクセル値を含むバイト配列です。

ピクセル処理

　data配列の各ピクセルには4バイトの値を含んでいます。赤、緑、青はそれぞれの値、Alphaチャンネルは別の値です。ピクセルの色は赤、緑、青を混ぜ合わせて最終的な色を決定します。Alphaチャンネルはピクセルの透明度を説明します。赤、緑、青、Alpha値の各値は0から255の値の間です。
これは最初のピクセルの色とAlpha値を設定するコードの例です:

var pixelIndex = 0;
imageData.data[pixelIndex　　　　]　=　255;　　//　red　color
imageData.data[pixelIndex　+　1]　=　　0;　　//　green color
imageData.data[pixelIndex　+　2]　=　　0;　　//　blue color
imageData.data[pixelIndex　+　3]　=　255;

以下コードを使用してピクセル値を読み取ってください:

var pixelIndex = 0;
var red = imageData.data[pixelIndex　　　　];　　//　red　color
var green = imageData.data[pixelIndex　+　1];　　//　green color
var blue = imageData.data[pixelIndex　+　2];　　//　blue color
var alpha = imageData.data[pixelIndex　+　3];

次のピクセルにアクセスするためにpixelIndex値を増加させます4（各ピクセルは、4要素で構成されています、如上記の通り）。
特定のピクセルのインデックスを計算する方法は以下の通りです：

　var index =　4　*　(x　+　y　*　);

のxとyは、計算中にxとピクセルのy座標から計算されるインデックスです。data配列内のピクセルは、左上隅から始まる長いピクセルシーケンスとして構成されています。行の終わりに達すると、ピクセルシーケンスはその行の最左のピクセルから下の行に続いて右方向に続きます。したがって、xに位置するピクセルのインデックスを計算するには、y座標を各行のピクセル数で乘じて、x値を加える必要があります。
これは説明20ピクセル幅と8ピクセルの高いImageDataピクセル配列の図です。右端に、各行のピクセルのインデックスが列挙されています。ご覧の通り、インデックスの列挙は左上角の0から始まり、右方向に増加します。行の端に達すると、インデックスの列挙はその行の最左のピクセルから下の行に続いて右方向に続きます。

ピクセルを画布上にコピーします

ピクセルの処理が完了したら、2D上下文機能は、putImageData()にそのコピーをします。putImageFunction()のputImageData()関数には2つのバージョンがあります。putImageData()関数の第1バージョンは、すべてのピクセルを画布上にコピーします。以下は例です:

var canvasX =　25;
var canvasY =　25;
context.putImageData(imageData, canvasX, canvasY);

canvasXとcanvasYパラメータは、xと画布上にどこにピクセルを挿入するかのy座標です。
putImageData()関数の第2バージョンは、ピクセルの矩形を画布上にコピーするのではなく、すべてのピクセルをコピーします。以下はコードの例です:

var canvasX =　25;
var canvasY =　25;
var sx = 0;
var sy = 0;
var sWidth =　25;
var sHeight =　25;
context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

sxとsyパラメータ（ソースXとソースY）は、xと矩形の左上角のy座標で、ピクセル配列からコピーされます。
sWidthおよびsHeightパラメータ（sourceWidthおよびsourceHeight）は、ピクセル配列からコピーされるこの矩形の幅と高さを指します。

キャンバスからピクセルを取得

キャンバスからピクセル矩形をImageDateオブジェクトにキャプチャすることもできます。これはgetImageData()関数を使用して行われます。以下はその例です:

var x =　　25;
var y =　　25;
var width =　100;
var height =　100;
var imageData2　= context.getImageData(x, y, width, height);

xおよびyパラメータは、キャンバスの矩形の左上角の座標を指しています。
のwidthおよびheightパラメータは、キャンバスの矩形の大きさを指しています。