如何取得滑鼠遊標下畫布像素的 RGB 顏色？

在 mousemove 上從畫布取得像素顏色

可以使用 getImageData 來取得畫布元素上滑鼠下像素的 RGB 值（） 方法。此方法傳回一個 CanvasPixelArray 對象，其中包含指定矩形區域的像素資料。

要取得滑鼠遊標下像素的 RGB 值，可以使用滑鼠事件物件的 clientX 和 clientY 屬性來決定滑鼠在畫布上的位置。然後，您可以使用這些座標在畫布上下文上呼叫 getImageData()，並傳入指定位置處 1x1 像素區域的寬度和高度。傳回的陣列將包含像素的 RGB 值。

以下範例程式碼片段示範如何取得畫布上滑鼠下的像素顏色：

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

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pixelData = ctx.getImageData(x, y, 1, 1).data;

  console.log(`The pixel at (${x}, ${y}) has the following RGB color: ${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}`);
});</code>

在此範例中，mousemove 事件偵聽器附加到 canvas 元素。當滑鼠在畫布上移動時，會觸發事件監聽器，並使用事件物件的 clientX 和 clientY 屬性來計算滑鼠在畫布上的座標。然後使用這些座標呼叫 getImageData() 方法來擷取指定區域的像素資料。最後，像素資料被記錄到控制台。

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