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