JavaScript でキャンバス上のマウスの下のピクセルの色を取得するにはどうすればよいですか?

マウス移動時にキャンバスからピクセル カラーを取得する

mousemove イベントを使用して、ユーザーのマウスの移動時の位置を追跡できます。キャンバス要素。キャンバスを基準としたマウスの位置を取得し、getImageData() メソッドを使用すると、マウス カーソルの下のピクセルの RGB 値を取得できます。

JavaScript でマウスの下のピクセルの色を取得するには、次の手順を実行します。これらの手順:

1. キャンバス コンテキストを取得します: getContext('2d') を使用して、キャンバス要素の 2D レンダリング コンテキスト (描画面) を取得します。
2. mousemove イベントをリッスンします: Mousemove イベント リスナーをキャンバス要素に追加します。
3. マウスの位置を取得します: Mousemove イベント ハンドラー内で、マウスの位置を取得します。 e.offsetX と e.offsetY を使用して、キャンバスを基準としたマウス カーソル。
4. ピクセル カラーを取得します。 getImageData(x, y, 1, 1) を使用して、
5. ピクセルの色を解析します: getImageData() メソッドは、赤、緑、青、アルファを表す 4 つの値の配列を返します。

コード例

マウスの下でピクセルの色を取得する方法を示す完全な例を次に示します。

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

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

canvas.addEventListener('mousemove', (e) => {
  const x = e.offsetX;
  const y = e.offsetY;

  const pixelData = ctx.getImageData(x, y, 1, 1).data;
  const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;

  console.log(color);
});</code>

この例では、マウスがキャンバス上を移動したときに、マウス カーソルの下のピクセルの RGB カラーをコンソールに記録します。

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