HTML キャンバスのピクセル データにアクセスして操作するにはどうすればよいですか?

HTML Canvas のピクセル データへのアクセス

HTML Canvas オブジェクト内の特定のピクセルの色を取得することは可能ですか?はい、Canvas API が提供するさまざまなメソッドを使用して、HTML Canvas のピクセル データにアクセスして操作できます。

ピクセル カラーの取得

ピクセルの色を取得するには、次の手順に従います。キャンバス内の特定の場所では、getImageData() メソッドを使用できます。このメソッドは、キャンバスの一部を表す ImageData オブジェクトを返します。 ImageData オブジェクトには、.data プロパティを使用してアクセスできるピクセル データの配列が含まれています。

ピクセル操作

ピクセル データを取得したら、操作できます。それは望みどおりです。たとえば、各ピクセルをグレーの階調に変換することでグレースケール イメージを作成できます。

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and convert it to grayscale.
for (var i = 0, n = pix.length; i < n; i += 4) {
  var gray = (pix[i] + pix[i+1] + pix[i+2]) / 3;
  pix[i  ] = gray;
  pix[i+1] = gray;
  pix[i+2] = gray;
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

getImageData() メソッドと putImageData() メソッドを利用すると、次のようなさまざまなピクセル操作タスクを実行できます。画像のフィルタリング、色の調整、HTML Canvas でのエフェクトの作成。

以上がHTML キャンバスのピクセル データにアクセスして操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。