Javascript 如何使此画布矩形可单击？

此矩形必须可单击。这种方法似乎是我问题的答案，但是鼠标点击的事件侦听器不起作用，我不知道为什么。我正在尝试这样做：

ctx.fillStyle = "#9b958c";
ctx.fillRect(sampleRectX, sampleRectY, sampleRectW, sampleRectH);
ctx.fillStyle = "#fff";
ctx.fillText("Click here to play again.", sampleTextX, sampleTextY);

我是一名编码初学者，如果我问的问题太“noob级别”，我很抱歉 （SamplelectX+SamplelectW>xPosition）和 （采样器位置位置） ) 你几乎说对了，只是在结尾少了一个括号

如果您检查从事件侦听器返回的鼠标事件（您应该始终检查从API获得的所有内容并查看其工作方式），您将看到不同的值

您使用了e.clientX，我也使用了e.clientX，但它对我不起作用，因为我的测试页面上的画布恰好不位于0,0（就像它几乎总是这样）

为了得到正确的值，我必须得到

e.offsetX

和

e.offsetY

可耻的是，我不知道鼠标事件上每个单独的坐标代表什么，但我将查找它并更新我的答案

我希望这次它能解决你的问题

如果有疑问，请始终使用console.log（）进行调试，以检查实际发生的情况以及API对您的影响

（如果它仍然不能解决您的问题，请将console.log（）放在代码中您不知道它是否执行的任何地方，并检查它没有执行的地方。）

---

我为您制作了一个示例fiddle

我在您的代码中没有看到任何事件处理。（顺便说一句，您来自处理背景？）：）已编辑！“处理背景”是什么意思？（我不知道这是否是我还不知道的事情，或者只是字面上的“处理背景”）不管怎样，我看到的大多数人以前都使用过这种处理方式来构造他们的代码和命名他们的函数，但这不是一种独特的模式。@barcellosm每当你有任何与JavaScript相关的问题，将代码放入一个测试环境中通常是很有帮助的，这样我们就可以测试它了。（甚至是你代码的简化版本）@Jonn好的，下次我会做的。：）是否有一个我应该放置事件侦听器或我需要的一些库的特定位置？我找不到代码上的任何错误，仍然没有发生任何事情。好的，在我再次声明错误之前，我又进行了一次更新，这次我测试了它。（没有库不能解决您的bug，只有了解问题才能解决）我在这里做了一些测试，我意识到事件侦听器无法识别鼠标点击。即使我不触摸鼠标，它也会执行getClickPosition（）（这就是为什么getClickPosition不能正常工作，没有可以使用的click coordenates）。我发布的JSFIDLE也不适用于您吗？您是否意外地编写了canvas.addEventListener（“单击”，getClickPosition（），false）？完成！首先，我需要将canvas.addEventListener更改为document.addEventListener，只有这样它才能正常工作。然后我必须将矩形变量的值更改为固定值——我使用的是

var-samplelectx=（（canvas.width*0.5）+（（window.innerWidth）*2.85）/100）、samplelecty=（（canvas.height*0.5）+（（window.innerHeight）*28）/100）、samplelectw=（（window innerWidth）*（（window innerHeight）*13）/100）

使矩形的大小和位置响应。我现在只需要想出另一种方法来做这件事。

canvas.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
    var xPosition = e.clientX;
    var yPosition = e.clientY;
    if ((sampleRectX <= xPosition) && (sampleRectX + sampleRectW >= xPosition) && (sampleRectY <= yPosition) && (sampleRectY + sampleRectH >= yPosition) {
        if (lose===true) {
            playAgain = true;
        };
    };
};

//Variables here
...

//Objects (player, enemy...)
...

function main() {
    ...
};

function init() {
    ...
};

function update() {
    ...
};

function draw() {
    ...
    if (gameStarted===true) {
        ...
        if (lose===true) {
            ...
            ctx.fillStyle = "#9b958c";
            ctx.fillRect(sampleRectX, sampleRectY, sampleRectW, sampleRectH);
            ctx.fillStyle = "#fff";
            ctx.fillText("Click here to play again.", sampleTextX, sampleTextY);
};

main();

((sampleRectX < xPosition) && 
 (sampleRectX + sampleRectW > xPosition) && 
 (sampleRectY < yPosition) && 
 (sampleRectY + sampleRectH > yPosition)
)