1

我有一个显示在 HTML5 画布上的图像，我在其中添加了一个onmouseover事件，理论上应该调用已编写在同一文件中的 JavaScript 函数。

但是，当我查看我的页面并将光标悬停在图像上时，什么也没有发生。

我已使用以下行将图像添加到我的 HTML 的隐藏部分：

<img id="assetBox" src = "images/box.png" alt="Assets" onmouseover = "displayAssetDescriptionTip()"/>

然后使用以下函数将图像绘制到画布上：

function drawDescriptionBoxes(){
var assetsDescriptionBox = document.getElementById("assetBox");
var liabilitiesDescriptionBox = document.getElementById("liabilitiesBox");
var incomeDescriptionBox = document.getElementById("incomeBox");
var expenditureDescriptionBox = document.getElementById("expenditureBox");
assetsDescriptionBox.src = 'images/box.png';
liabilitiesDescriptionBox.src = 'images/box.png';
incomeDescriptionBox.src = 'images/box.png';
expenditureDescriptionBox.src = 'images/box.png';

context.drawImage(assetsDescriptionBox, 70, 400, 120, 70);
context.drawImage(liabilitiesDescriptionBox, 300, 400, 120, 70);
context.drawImage(incomeDescriptionBox, 530, 400, 120, 70);
context.drawImage(expenditureDescriptionBox, 760, 400, 120, 70);

context.strokeText("Assets", 100, 490);
context.strokeText("Liabilities", 325, 490);
context.strokeText("Income", 550, 490);
context.strokeText("Expenditure", 775, 490);


}

当检测到光标悬停在图像上时我想要调用的函数是：

function displayAssetDescriptionTip(){
        document.getElementById('tipsParagraph').innerHTML = "Assets are items that can be bought or sold for cash.";
        console.log("displayAssetDescriptionTip being called");
}

但是，由于某种原因，当我在浏览器中查看我的页面并将光标悬停在画布上的图像上时，什么也没有发生，控制台中也没有显示任何内容......我认为这意味着我的onmouseover事件不是开火，但我不知道为什么会这样——任何人都可以向我解释，并指出我需要做些什么才能让它正确吗？

编辑 22/02/2013 @ 14:40

我尝试添加以下 JS 来跟踪我拥有的一个单独的 JS 文件中的鼠标坐标：

/*Add code to keep track of the mouse coordinates */
var boundingBox = canvas.getBoundingClientRect();
var mousex = (mouse_event.clientX-boundingBox.left)*(canvas.width/boundingBox.width);
var mouseY = (mouse_event.clientY-boundingBox.top)*(canvas.height/boundingBox.height);

我知道我将不得不编写代码来告诉脚本实际如何处理坐标，但我只是想先尝试一下，因为我已经有一段时间没有自己处理坐标了。但是当我在浏览器中查看该页面时，我收到一个控制台错误，提示“未定义画布，并抱怨以下行：

var boundingBox = canvas.getBoundingClientRect();

我想知道这是否是因为这是一个单独的脚本文件，并且在我刚刚添加它之前实际上没有对我正在使用的画布的任何引用。我是否需要再次定义它，即使它已经在运行此脚本的 HTML 页面中定义？

4

2 回答 2

0

仅仅绘制图像并不会神奇地使图像表现得像一个节点。例如，您不能更改它src并让它自动更改画布上显示的图像。

相反，您必须在画布上手动跟踪鼠标的移动onmousemove，然后计算鼠标悬停的内容并对其进行处理。有在 Game Maker 中制作菜单的经验，我可以告诉你这很难！

于 2013-02-20T16:01:17.030 回答
0

这是一个假设，但绘制的图像与您使用鼠标悬停的元素不同。尝试向图像和正在绘制的图像添加一个类，并在该类上设置 onmouseover（检查 jQuery 以使此过程更容易）

于 2013-02-20T16:01:27.233 回答