如何在 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中文网其他相关文章！