我想使用JavaScript在我的畫布上添加鼠標移動效果

Question

只應在特定畫布位置創建鼠標移動效果。 另外我創建了MousePosition函數（見下文）。 MouseOverButton函數中的Mouseover效果命令應該在 之間。

但仍似乎無法工作。

我的代碼：

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

Answer 1

在function MouseOverButton(e)你的事件參數被稱爲e但是你用event它傳遞給getPosition時：

var cell=getPosition(event);應該var cell=getPosition(e);

Answer 2

試試這個：

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