キャンバス上のマウスの下にあるピクセルの RGB 値を取得する方法-jsチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-10-31 08:13:29

オリジナル

165 人が閲覧しました

How to Get the RGB Value of a Pixel Under the Mouse on a Canvas?

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 値を表示します。

補足: