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

I want to add Mouseover effect on my Canvas using JavaScript

本文关键字：添加 鼠标 悬停 JavaScript 我的      更新时间：2023-09-26

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

但它似乎仍然不起作用。

我的代码：

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);
    }
}

function MouseOverButton(e) 中的事件参数称为 e 但在将其传递给 getPosition 时event

：

var cell=getPosition(event);应该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);
    }
}
相关文章：