HTML5 Canvas mouse over event на холсте

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