javascript - キャンバスの一部をクリック可能にするには?

Question

私がやりたいのは、キャンバスの一部をクリック可能にすることです。クリックすると、関数が呼び出されます。JavaScriptでそれをどのように行いますか?

Answer 1

クリック イベントをキャンバス全体にバインドし、クリック時のカーソルの位置を検出する必要があります。次に、カーソルが特定のサイズ内にある場合は、関数を実行します。

例として div を使用したフィドルを次に示します: http://jsfiddle.net/R8rED/17/

function testAndExecute(elem, event, area, func){
    // area is relative to page :
    // var area = {
    //     x0: 60,
    //     y0: 60,
    //     x1: 100,
    //     y1: 100
    // }    
    elem.addEventListener(event, function(e){
        var page = {
            x: e.pageX,
            y: e.pageY
        }
        if(page.x >= area.x0 && page.x <= area.x1 && page.y >= area.y0 && page.y <= area.y1){
            func();
        }
    });
}