マウスカーソルの下のキャンバスピクセルのRGBカラーを取得するにはどうすればよいですか?

mousemove でキャンバスからピクセル カラーを取得します

キャンバス要素上のマウスの下にあるピクセルの RGB 値を取得するには、getImageData を使用します。 （） 方法。このメソッドは、指定された長方形領域のピクセル データを含む CanvasPixelArray オブジェクトを返します。

マウス カーソルの下のピクセルの RGB 値を取得するには、マウス イベント オブジェクトの clientX プロパティと clientY プロパティを使用して決定できます。キャンバス上のマウスの位置。次に、これらの座標を使用してキャンバス コンテキストで getImageData() を呼び出し、指定された位置にある 1x1 ピクセル領域の幅と高さを渡すことができます。返された配列には、ピクセルの RGB 値が含まれます。

キャンバス上のマウスの下にあるピクセルの色を取得する方法を示すコード スニペットの例です。

<code class="javascript">const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pixelData = ctx.getImageData(x, y, 1, 1).data;

  console.log(`The pixel at (${x}, ${y}) has the following RGB color: ${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}`);
});</code>

この例ではでは、mousemove イベント リスナーが Canvas 要素にアタッチされます。マウスがキャンバス上を移動すると、イベント リスナーがトリガーされ、イベント オブジェクトの clientX プロパティと clientY プロパティを使用してキャンバス上のマウスの座標が計算されます。次に、これらの座標を使用して getImageData() メソッドが呼び出され、指定された領域のピクセル データが取得されます。最後に、ピクセル データがコンソールに記録されます。

以上がマウスカーソルの下のキャンバスピクセルのRGBカラーを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。