javascript 我想检查颜色在坐标我点击与画布，但我只得到黑色无论我点击

ff29svar 于 2023-05-16 发布在 Java

关注(0)|答案(1)|浏览(100)

我有一个react js应用程序，我用canvas在上面画正方形。每个方块都有一个特定的颜色，我想当我点击它时，我可以检索颜色，这样我就可以继续我的程序。
但无论我点击哪里，我总是得到同样的东西：黑色。当我点击一个绿色的正方形。
下面是我的程序来恢复颜色在定位时的点击.

canvas.addEventListener("click", function (event) {
      console.log("hola")
      const x = event.clientX - canvas.offsetLeft;
      const y = event.clientY - canvas.offsetTop;
      const imageData = ctx.getImageData(x, y, 10, 10);
      console.log(imageData);
      console.log(x, y, "x/y");
      const pixelData = imageData.data;
      console.log(
        `Rouge : ${pixelData[0]}, Vert : ${pixelData[1]}, Bleu : ${pixelData[2]}, Alpha : ${pixelData[3]}`
      );

    }, false);

这是我的输出，和点击的坐标。

这是我画布上另一个地方的点击。

就像你看到的，我有值0000而不是我的颜色

JavaScript

来源：https://stackoverflow.com/questions/76200836/i-want-to-check-the-color-at-the-coordinate-of-my-click-with-canvas-but-i-only-g

1条答案

按热度按时间

zysjyyx41#

为了将点击Map到画布上（width和height可能与实际显示大小不同），您需要首先将点击的位置标准化，然后将其乘以height和width。首先，您需要一个getBoundingClientRect()，因为它的坐标与clientX和clientY在同一个空间中。然后，您可以使用此数学方法来获得单击所表示的画布上的确切像素坐标：

(client - bb.offset( / bb.size * canvas.size

然后只采样一个 * 单个 * 像素，而不是10x10网格，以获得精确的点击颜色。

const canvas = document.querySelector( 'canvas' );
const ctx = canvas.getContext( '2d' );

// Create some example color we can sample

const gradient = ctx.createLinearGradient( 0, 0, canvas.width, canvas.height );

gradient.addColorStop( 0, 'red' );
gradient.addColorStop( 1, 'blue' );

ctx.fillStyle = gradient;
ctx.fillRect( 0, 0, canvas.width, canvas.height );

canvas.addEventListener( 'click', event => {
      
  const bb = canvas.getBoundingClientRect();
  const x = Math.floor((event.clientX - bb.left) / bb.width * canvas.width);
  const y = Math.floor((event.clientY - bb.top) / bb.height * canvas.height);
  const [ r, g, b, a ] = ctx.getImageData( x, y, 1, 1 ).data;
  const color =  `rgb(${r},${g},${b})`;
  
  console.log({ color, r, g, b, a })
  
  document.body.style.background = color;
  
})

<canvas width=300 height=300></canvas>

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 我想检查颜色在坐标我点击与画布，但我只得到黑色无论我点击

1条答案

相关问题

热门标签

最新问答