如何在 JavaScript 中取得畫布上滑鼠下的像素顏色？

滑鼠移動時從畫布取得像素顏色

mousemove 事件可用於追蹤使用者滑鼠移動時的位置畫布元素。透過取得滑鼠相對於畫布的位置並使用 getImageData() 方法，可以擷取滑鼠遊標下像素的 RGB 值。

要在JavaScript 中取得滑鼠下像素顏色，請執行下列操作這些步驟：

1. 取得畫布上下文：使用getContext('2d') 取得畫布元素的2D 渲染上下文（繪圖表面）。
2. 監聽 mousemove 事件： 在 canvas 元素中加入 mousemove 事件監聽器。
3. 取得滑鼠位置： 在 mousemove 事件處理程序中，取得滑鼠位置使用 e.offsetX 和 e.offsetY 相對於畫布的滑鼠遊標。
4. 取得像素顏色：使用 getImageData(x, y, 1, 1) 取得影像資料指定像素位置並將結果儲存於變數中。
5. 解析像素顏色： getImageData() 方法傳回一個包含四個值的數組，分別代表紅色、綠色、藍色和 alpha像素的通道。

範例程式碼

這是一個完整的範例，示範如何取得滑鼠下的像素顏色：

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

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

canvas.addEventListener('mousemove', (e) => {
  const x = e.offsetX;
  const y = e.offsetY;

  const pixelData = ctx.getImageData(x, y, 1, 1).data;
  const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;

  console.log(color);
});</code>

當滑鼠在畫布上移動時，此範例會將滑鼠遊標下像素的RGB 顏色記錄到控制台。

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