HTML5 Canvas鼠标悬停在画布上的事件

Question

我正在将图像载入画布元素并播放声音文件 我想在将鼠标移到画布上的图像时再次播放声音。 我知道该怎么做，在画布下添加一个按钮，但我不知道如何通过将鼠标移动到图像上来实现这一点。

有人可以帮助我吗？

Answer 1

您需要使用JavaScript来创建一个鼠标悬停事件......看看这个例子

function RefreshMouseEvents(ElementId) 
{ 
    FireEvent(ElementId, 'mouseover'); 
    setTimeout("TriggerMouseEvent('" + ElementId + "', '" + event.clientX + "', '" + event.clientY + "')", 1); 
} 

function TriggerMouseEvent(ElementId, MouseXPos, MouseYPos) 
{ 
    if(IsMouseOver(ElementId, (1*MouseXPos), (1*MouseYPos))) 
     FireEvent(ElementId, 'mouseover'); 
    else  
     FireEvent(ElementId, 'mouseout'); 
} 

function IsMouseOver(ElementId, MouseXPos, MouseYPos) 
{ 
    if(document.getElementById(ElementId) != null)  
    { 
     var Element = document.getElementById(ElementId); 
     var Left = Element.getBoundingClientRect().left, 
      Top = Element.getBoundingClientRect().top, 
      Right = Element.getBoundingClientRect().right, 
      Bottom = Element.getBoundingClientRect().bottom;  
     return ((MouseXPos >= Left) && (MouseXPos <= Right) && (MouseYPos >= Top) && (MouseYPos <= Bottom))  
    } 
    else 
     return false; 
} 

function FireEvent(ElementId, EventName) 
{ 
    if(document.getElementById(ElementId) != null)  
    { 
     if(document.getElementById(ElementId).fireEvent) 
     { 
      document.getElementById(ElementId).fireEvent('on' + EventName);  
     } 
     else 
     { 
      var evObj = document.createEvent('Events'); 
      evObj.initEvent(EventName, true, false); 
      document.getElementById(ElementId).dispatchEvent(evObj); 
     } 
    } 
} 

我已经包含一些链接教程初学者以下。请标记此答案，如果你觉得有帮助。

HTML5,Javascript, & CSS

Beginners Guide to HTML5 Canvas and JS