Javascript 我只能从矩形的某个点得到数据，而不是整个矩形

我正在尝试为HTML画布实现eventListener。 我想从SVG画布向rect添加事件

问题是 我只能从矩形的某个点得到数据，而不是整个矩形

canvas.addEventListener("click", e => {
          this.mousePos = {
            x: e.clientX - canvas.offsetLeft,
            y: e.clientY - canvas.offsetTop
          };
          console.log(this.mousePos.x, this.mousePos.y);

          const pixel = hitCtx.getImageData(
            this.mousePos.x,
            this.mousePos.y,
            1,
            1
          ).data;
          console.log(pixel);

          var r = pixel[0];
          var g = pixel[1];
          var b = pixel[2];
          const color = "rgb(" + r + "," + g + "," + b + ")";

          console.log(color);
  
          if (color == "rgb(255,59,59)") {
            console.log("click on the pipe");
          }
});

我读了这篇文章，并遵循了第二种方法，即使用颜色

你可以试试这个

let canvas = document.querySelector("canvas");
let rect = canvas.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
console.log(rect);

---

最初的目的是检查用户是否单击了画布中的红色矩形

给出的代码试图通过查看单击位置的像素并确定它是否为颜色（一种红色）来实现这一点。如果没有，则没有单击“管道”

然而，在给定的代码笔中，该测试是在正确的位置进行的，而不是在绘制了红色管道的画布上。而是在画布上完成。如果我们更改为在绘制红色管道的画布上进行测试，则会得到正确的单击

const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
const hitCanvas=document.createElement（'canvas'）；
const hitCtx=hitCanvas.getContext（'2d'）；
画布宽度=300；
画布高度=200；
宽度=300；
高度=200；
var宽度=300；
var高度=10；
var startX=0；
var-startY=100；
ctx.beginPath（）；
ctx.translate（200,30）；
ctx.旋转（（31.5*Math.PI）/-180）；
ctx.translate（-225，-65）；
ctx.rect（this.startX，this.startY，this.width，this.height）；
ctx.fillStyle=“#ff3b3b”；
ctx.fill（）；
hitCtx.beginPath（）；
hitCtx.translate（200,30）；
hitCtx.旋转（（-1*Math.PI）/-180）；
hitCtx.translate（-225，-40）；
hitCtx.rect（this.startX，this.startY，this.width，this.height）；
hitCtx.fillStyle=“#ff3b3b”；
hitCtx.fill（）；
canvas.addEventListener（“单击”，e=>{
此参数为0.mousePos={
x:e.clientX-canvas.offsetLeft，
y:e.clientY-canvas.offsetTop
};
log（this.mousePos.x，this.mousePos.y）；
const pixel=ctx.getImageData（//更改为ctx以确保我们的测试位于红色矩形上*/
这是mousePos.x，
这个，老鼠皮，
1.
1.
).数据；
控制台日志（像素）；
var r=像素[0]；
var g=像素[1]；
var b=像素[2]；
const color=“rgb”（“+r+”、“+g+”、“+b+”）；
控制台。日志（颜色）；
如果（颜色=“rgb（255,59,59）”）{
log（“点击管道”）；
}
});
正文{
保证金：0；
填充：0；
}
您似乎在名为canvas的元素上绘制了管道，即红线，但在名为hitCanvas的画布上测试了单击的像素，该画布上除了一个像素之外似乎什么都没有。应该在画布上绘制的内容。而且，这似乎与SVG没有任何关系。“你的密码笔里少了什么东西吗？”哈沃斯抱歉。我打错了它只是为了HTML画布。我会编辑。我还阅读了这篇关于按颜色添加画布事件的文章。我将把这篇文章添加到我的帖子中。我编辑我的密码笔。感谢您的反馈！你的想法是在画布上画其他东西，但通过在画布上覆盖一个图表管道来测试它是否在管道上？@霍沃斯说得对。我想将事件添加到红管，而不是整个画布overlay@A霍沃斯：我不确定。检查矩形，它在没有其他画布的情况下运行良好。谢谢你的评论。