Javascript 如何在画布中绘制的图像上指定onclick？

我试图让一个事件在用户单击图像时对其进行处理

var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.style = "border:2px solid black";
canvas.addEventListener('click', clickReporter, false);
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

var clickhere = new Image();

clickhere.onload = function () {
        draw();
};

clickhere.src = "clickhere.png";


function draw() {
ctx.drawImage(clickhere, 200, 200);
}

function clickReporter(e) {
    alert("Thanks for clicking!");
    }

---

显然，只要用户在画布中单击，所有这些代码都会让警报框熄灭。图像是100 x 100像素。

首先：您的代码中显然存在与图像相关的错误（至少在您提供的示例中）：

示例应如下所示：

var button = new Image();

/// use button for these as well -
button.onload = function () {         /// here
    draw();
};
button.src = "clickhere.png";        /// here

function draw() {
    ctx.drawImage(button, 200, 200); /// and here (or use 'this' instead)
}

下一个问题 Canvas不知道我们在里面画了什么，所以我们需要确保我们自己提供了所有的底层逻辑来处理这类事情

例如：这里有一种方法可以检查是否单击了绘制图像的区域：

function clickReporter(e) { /// assign event to some variable

    /// adjust mouse click position to be relative to canvas:
    var rect = this.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    /// check x/y coordinate against the image position and dimension
    if (x >= 200 && x <= (200 + button.width) &&
        y >= 200 && y <= (200 + button.height)) {
        alert("Thanks for clicking!");
    }
}

函数clickReporter（e）{///将事件分配给某个变量
///将鼠标单击位置调整为相对于画布：
var rect=this.getBoundingClientRect（），
x=e.clientX-rect.left，
y=e.clientY-rect.top；
///对照图像位置和尺寸检查x/y坐标
如果（x>=200&&x=200&&y首先：您的代码中显然存在与图像相关的错误（至少在您提供的示例中）：

示例应如下所示：

var button = new Image();

/// use button for these as well -
button.onload = function () {         /// here
    draw();
};
button.src = "clickhere.png";        /// here

function draw() {
    ctx.drawImage(button, 200, 200); /// and here (or use 'this' instead)
}

下一个问题
Canvas不知道我们在里面画了什么，所以我们需要确保我们自己提供了所有的底层逻辑来处理这类事情

例如：这里有一种方法可以检查是否单击了绘制图像的区域：

function clickReporter(e) { /// assign event to some variable

    /// adjust mouse click position to be relative to canvas:
    var rect = this.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    /// check x/y coordinate against the image position and dimension
    if (x >= 200 && x <= (200 + button.width) &&
        y >= 200 && y <= (200 + button.height)) {
        alert("Thanks for clicking!");
    }
}

函数clickReporter（e）{///将事件分配给某个变量
///将鼠标单击位置调整为相对于画布：
var rect=this.getBoundingClientRect（），
x=e.clientX-rect.left，
y=e.clientY-rect.top；
///对照图像位置和尺寸检查x/y坐标
如果（x>=200&&x=200&&y很抱歉，我正在更改代码并将var按钮重命名为clickhere。我实现了您的代码，但警报框没有启动。@Jalepano您在控制台中有任何错误吗？请设置一个小提琴，我们可以从那里开始。（css边框将影响边界矩形，其宽度必须添加到x和y中）。@Jalepano ok，似乎我是罪人。你可能复制了我上面的示例，而我将y作为大写字母y，这当然不起作用。对此表示抱歉。请参阅我更新答案中的修改过的小提琴，我已更正此问题（我想我已经看了三遍了，直到现在我还没有发现那个……嗯，自我提醒：订购眼镜）。很抱歉，我更改了代码并将var按钮重命名为clickhere。我实现了您的代码，但警告框没有关闭。@Jalepano您在控制台中有任何错误吗？请设置一个小提琴，我们可以从那里开始。（css边框将影响边界矩形，其宽度必须添加到x和y）@Jalepano好的，看来我是罪人。你可能复制了我上面的例子，我把y作为大写字母y，这当然不起作用。很抱歉。请看我更新答案中的修改过的小提琴，我已经更正了这一点（我想我已经看了三遍了，直到现在我还没有发现那个……嗯。给自己的提示：订购眼镜）。