Onclick 在 javascript 画布中创建的图像答案

【问题标题】：Onclick on image that is created in a javascript canvasOnclick 在 javascript 画布中创建的图像
【发布时间】：2014-06-24 15:14:36
【问题描述】：

嗨，我准备了snippet。

在我的示例中，我使用 drawImage 函数将图像绘制到游戏中，因为我不想将它们全部包含在 HTML 中......但是，我的问题是，我找不到任何可能给那些“自己创建的”图像一个 onclick 功能。我认为对象 "Image" (var someImage = new Image();) 与 HTML <img> 或 <input type="image"> 相当，但无论我怎么努力，我都做不到。

谁能帮帮我？

【问题讨论】：

标签： javascript html canvas onclick drawing

【解决方案1】：

您已将点击事件提供给画布上下文而不是画布，请将其更改为：

myCanvas.onclick = function()

至于使单个图像可点击（如果您绘制多个），您始终可以保留一组可点击区域以及它们应该转到的与图像相对应的链接，然后在画布上添加一个循环点击检查鼠标坐标是否与数组中的一个区域匹配。

例如：JSFiddle Code

【讨论】：

抱歉，我的 sn-ps 总是出错 :D 我将 myCanvas.onclick = function() { ... } 更新为 someImage.onclick = function() { ... }。我正在考虑您的解决方案，但我想使用 onclick 功能使其更容易，我敢打赌：D
很遗憾，浏览器只是将画布视为一个实体对象，您需要通过Javascript自己跟踪可点击区域
@HerraE 如果詹姆斯回答了你的问题，你应该投票并接受答案。