キャンバス要素内のどのオブジェクト名/ IDをクリックするか？

Question

私は<canvas>要素の中に2つの画像を持っています。

var ctx = document.getElementById('canvas').getContext('2d'); 

var img1 = new Image(); 
img1.src = 'cloud.jpg'; 
img1.name = "Image 1"; 
img1.onload = function() { 
    ctx.drawImage(img1, 0, 0); 
}; 

var img2 = new Image(); 
img2.src = 'eleph.png'; 
img2.name = "Image 2"; 
img2.onload = function() { 
    ctx.drawImage(img2, 250, 250); 
}; 

ここで、ユーザーが内部のキャンバスをクリックすると、クリックされたオブジェクトを見つけたいと思います。 たとえば、ユーザーがキャンバス内の対応するイメージをクリックすると、警告img1.nameまたはimg2.nameが表示されます。

これを行う方法はいくつか教えてください。ありがとう！

Answer 1

まず、各画像の位置とサイズを変数に格納しておく必要があります。その後、clickイベントでマウスの下にあるものをチェックするイメージ位置のコレクションを反復するonclickハンドラをcanvas要素に追加します。