キャンバス上のマウスの下にあるピクセルの RGB 値を取得する方法

Mousemove を使用してキャンバス上のマウスの下のピクセル カラーを取得する

Web アプリケーションでは、ピクセルの RGB 値を直接取得すると便利なことがよくあります。キャンバス要素と対話するときにマウス カーソルの下に表示されます。これを JavaScript で実現する方法は次のとおりです:

例:

次の HTML コードを考えてみましょう:

<code class="html"><canvas id="canvas" width="200" height="200"></canvas>
<div id="color-value"></div></code>

そして次の JavaScript コード:

<code class="js">const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// Set up an image on the canvas
const img = new Image();
img.src = "path/to/image.jpg";

img.onload = function() {
  context.drawImage(img, 0, 0);
};

// Add event listener for mouse movement
canvas.addEventListener("mousemove", (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  const pixelData = context.getImageData(x, y, 1, 1).data;
  const r = pixelData[0];
  const g = pixelData[1];
  const b = pixelData[2];
  
  document.getElementById("color-value").innerHTML = `RGB: ${r}, ${g}, ${b}`;
});</code>

この例では、drawImage メソッドを使用して画像を画面に表示します。キャンバス。マウスがキャンバス上を移動すると、mousemove イベント リスナーは現在のマウス位置をキャプチャし、getBoundingClientRect 関数を使用してキャンバス内のピクセル座標を計算します。次に、getImageData メソッドを使用してピクセル データを取得し、カラー値 div に RGB 値を表示します。

補足:

• 返されたピクセルデータ配列getImageData には、赤、緑、青、アルファ (透明度) の 4 つの値が含まれています。
• イベント リスナーは次のことができます。ツールヒントのレンダリングや UI 要素の更新など、他のアクションを実行するように変更することもできます。
• この手法は、描画された図形やオブジェクトの移動など、キャンバス上の動的コンテンツを操作するように拡張できます。

以上がキャンバス上のマウスの下にあるピクセルの RGB 値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。