我想使用JavaScript在画布上添加鼠标悬停效果

鼠标悬停效果只能在特定的画布位置上创建。 此外，我还创建了MousePosition函数（见下文）。 用于Mouseover效果的命令应位于MouseOverButton函数上

但它似乎仍然不起作用

我的代码：

function init() {
    var can=document.getElementById("SnakeCanvas");
    var ctx=can.getContext("2d");
    can.addEventListener('mouseover',MouseOverButton, false);
}

function getPosition(event) {
    var x = new Number();
    var y = new Number();
    var can = document.getElementById("SnakeCanvas");

    if (event.x != undefined && event.y != undefined) {
        x = event.x;
        y = event.y;
    } else {//Firefox Compatability//
        x = event.clientX + document.body.scrollLeft +
        document.documentElement.scrollLeft;
        y = event.clientY + document.body.scrollTop +
        document.documentElement.scrollTop;
    }
    x -= can.offsetLeft;
    y -= can.offsetTop;
    return {mx:x, my:y};
}


function MouseOverButton(e) {
    var can=document.getElementById("SnakeCanvas");
    var ctx=can.getContext("2d");
    var cell=getPosition(event);

    if ((cell.mx > 854 && cell.mx < 985) && (cell.my > 256 && cell.my < 315)) {
        ReplaceImage(ctx,'Images/New_Game_Hover.png',570,100,140,70);
    }
}

函数init（）{
var can=document.getElementById（“蛇形画布”）；
var ctx=can.getContext（“2d”）；
can.addEventListener（'mouseover'，MouseOverButton，false）；
}
函数getPosition（事件）{
var x=新的数字（）；
var y=新的数字（）；
var can=document.getElementById（“蛇形画布”）；
if（event.x！=未定义&&event.y！=未定义）{
x=事件x；
y=事件。y；
}else{//Firefox兼容性//
x=event.clientX+document.body.scrollLeft+
document.documentElement.scrollLeft；
y=event.clientY+document.body.scrollTop+
document.documentElement.scrollTop；
}
x-=can.offsetLeft；
y-=可偏置；
返回{mx:x，my:y}；
}
功能鼠标按钮（e）{
var can=document.getElementById（“蛇形画布”）；
var ctx=can.getContext（“2d”）；
变量单元格=getPosition（事件）；
如果（（cell.mx>854&&cell.mx<985）和（&&cell.my>256&&cell.my<315））{
替换图像（ctx，'Images/New_Game_Hover.png'，570100140,70）；
}
}

调用

函数MouseOverButton（e）

中的事件参数

e

，但将其传递给

getPosition

时使用

事件

：

var cell=getPosition（事件）应该是
var cell=getPosition（e）
尝试以下操作：

function MouseOverButton(e) {
    e = e || window.event; // Compatibility
    var can = document.getElementById("SnakeCanvas");
    var ctx = can.getContext("2d");
    var cell = getPosition(e);
//                         ^ That was `event`, breaking your code.
    if ((cell.mx > 854 && cell.mx < 985) && (cell.my > 256 && cell.my < 315)) {
        ReplaceImage(ctx,'Images/New_Game_Hover.png',570,100,140,70);
    }
}

功能鼠标按钮（e）{
e=e | | window.event；//兼容性
var can=document.getElementById（“蛇形画布”）；
var ctx=can.getContext（“2d”）；
var单元=getPosition（e）；
//^这是“事件”，正在破坏您的代码。
如果（（cell.mx>854&&cell.mx<985）和（&&cell.my>256&&cell.my<315））{
替换图像（ctx，'Images/New_Game_Hover.png'，570100140,70）；
}
}
大家好，谢谢你们的帮助。您的建议仅作为“单击”事件，而不是鼠标悬停。