如何取得畫布上滑鼠下某個像素的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>

以及以下JavaScript 程式碼：

在此範例中，drawImage 方法用於在畫布上顯示影像。當滑鼠在畫布上移動時，mousemove 事件偵聽器會擷取目前滑鼠位置，並使用 getBoundingClientRect 函數計算畫布內的像素座標。然後，它使用 getImageData 方法檢索像素數據，並在顏色值 div 中顯示 RGB 值。

附加說明：
• 傳回的 PixelData 陣列getImageData 包含四個值：紅色、綠色、藍色和 alpha（透明度）。
• 可以修改事件監聽器以執行其他操作，例如渲染工具提示或更新 UI 元素。

此技術可以擴展到處理畫布上的動態內容，例如繪製的形狀或移動的物件。

以上是如何取得畫布上滑鼠下某個像素的RGB值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！