キャンバスポイントにリスナーを追加する

Question

ちょっとキャンバスにシンプルな三角形があり、各ポイントをクリックするとアクションが発生するようにリスナーを各三角形のポイントに追加したいと思います。 キャンバスでこのような手順が可能かどうかを知りたいですか？私の主な質問は以下の通りです：

1. カンバスシングルポイントにリスナーを追加できますか？私の選択肢は何ですか？

更新：

私は私の運を試してみましたが、すべてのキャンバス上でクリックイベントを追加することに成功した後、マウスクリックの現在のポイントを得るが、私の解決策は最終的なものであり、非常に貴重ではないではありませんしています。

クリックした各ポイントの周りにユーザーが貴重なクリックをする必要がないように領域を作成できますか？

http://codepen.io/Barak/pen/VadQYm

$(function(){ 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var triangle = [{ x: 58, y: 845 }, { x: 984, y: 845 }, { x: 521, y: 41 }]; 
 
    drawTriangle(triangle); 
 
    function drawTriangle(t) { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(t[0].x, t[0].y); 
 
    ctx.lineTo(t[1].x, t[1].y); 
 
    ctx.lineTo(t[2].x, t[2].y); 
 
    ctx.closePath(); 
 
    ctx.strokeStyle = 'black'; 
 
    ctx.lineWidth = 2; 
 
    ctx.stroke(); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="canvas-wrapper"> 
 
     <canvas id="canvas" width=1024 height=980></canvas> 
 
    </div>

Answer 1

あなたのキャンバスでのイベントを添付することができ単一のポイントがありません - それだけで描画APIである - あなたのイメージのための容器は、（のためW3Schoolを参照してください。さらなる参照）。

しかし、あなたが座標を持っていれば、キャンバスのクリック位置を常に検出することができます。

私はあなたにfiddleを作成し、解決策を示しました。

canvas.addEventListener("mousedown", doMouseDown, false); 
function doMouseDown(e) { 
for (i = 0; i < triangle.length; ++i) { 
    if ((e.x triangle[i].x) && (e.y === triangle[i].y)) { 
    console.log('you hit an edge!'); 
    } 
} 
} 

更新：

あなたが許容値を作成する場合は、プラス、あなたが受け入れるようにしたい実際の位置のマイナスを定義する必要があります。シンプルではないエレガントな方法は、以下のことができます：

function tolerance(number){ 
//define the tolerance here 
var tolerance = 15; 
//all the accepted numbers within the tolerance will be in this array 
var numberArray=[]; 

for(i=0;i<(tolerance)*2;++i){ 
    if(i >= tolerance){ 
     if(i!=tolerance){ 
      numberArray[i] = numberArray[i-1]-1; 
     }else{ 
      numberArray[i] = number -1; 
     } 
    }else{ 
     if(i!=0){ 
      numberArray[i] = numberArray[i-1]+1; 
     }else{ 
      numberArray[i] = number +1; 
     } 
    } 
} 
//don't forget to put the actual number in the array 
numberArray.push(number); 
return numberArray; 
} 

あなたは今、このような何か見てdoMouseDown機能を変更することができますどのように、

function doMouseDown(e) { 
for (k = 0; k < triangle.length; ++k) { 
    if ((tolerance(triangle[k].x).indexOf(e.x)!=-1) && (tolerance(triangle[k].y).indexOf(e.y)!=-1)) { 
     console.log('you hit an edge!'); 
    } 
    } 
}