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

【问题标题】：HTML5 Canvas mouse over event on canvasHTML5 Canvas 鼠标悬停在画布上的事件
【发布时间】：2013-05-04 04:46:29
【问题描述】：

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

有人可以帮帮我吗？

【问题讨论】：

【解决方案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

【讨论】：

谢谢。我对javascript真的很陌生，也许你可以解释一下这到底是做什么的？或者你知道一个很好的教程吗？
我在答案中提供了一些有用的教程来帮助您入门。