Mousemoveでキャンバスからピクセルカラーを取得するにはどうすればよいですか?

Mousemove でキャンバスからピクセル カラーを取得する

概要

この投稿では、マウス カーソルの下にあるピクセルの RGB 値を取得する方法について説明します。キャンバス要素上を移動します。自己完結型の例を使用して包括的なアプローチを提供します。

解決策

これを実現するには、まず目的の寸法でキャンバスを作成します。

<code class="html"><canvas id="example" width="200" height="60"></canvas></code>

塗りつぶし正方形などの要素を含むキャンバス:

<code class="js">const example = document.getElementById('example');
const ctx = example.getContext('2d');

ctx.fillStyle = randomColor();
ctx.fillRect(0, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(55, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(110, 0, 50, 50);</code>

最後に、カーソルの位置のピクセル値をキャプチャする Mousemove イベント ハンドラーを追加します:

<code class="js">$('#example').mousemove(function(e) {
  // Calculate the position relative to the canvas
  const pos = findPos(this);
  const x = e.pageX - pos.x;
  const y = e.pageY - pos.y;
  const coord = `x=${x}, y=${y}`;

  // Get the pixel value
  const c = this.getContext('2d');
  const p = c.getImageData(x, y, 1, 1).data;

  // Convert to hex format
  const hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);

  // Display the color information
  $('#status').html(coord + "<br>" + hex);
});</code>

ユーティリティ関数

このコードは、要素の位置を検索し、RGB 値を 16 進数に変換するためのサポート関数に依存しています。これらの関数を次のように定義します。

<code class="js">function findPos(obj) {
  let curleft = 0, curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return { x: curleft, y: curtop };
  }
  return undefined;
}

function rgbToHex(r, g, b) {
  if (r > 255 || g > 255 || b > 255) throw "Invalid color component";

  return ((r <h3 id="ライブ-サンプル">ライブ サンプル</h3>
<p>動作中の完全な例を確認するには、次のリンクにアクセスしてください。</p>
<p>https://bl.ocks.org /wayneburkett/ca41a5245a9f48766b7bc881448f9203</p></code>

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