Jquery 画布HTML5点击多个图像事件

我的画布中有多个图像。我有一个大的形象，在这我有其他的形象。我拿了这个

---

画布HTML5对我来说是全新的。那么，如何在画布中的每个图像上设置单击事件呢？

当您将图像绘制到画布时，它不是作为图像添加到画布中，而是作为一组颜色值添加到画布中。以后无法检查哪个操作导致哪些像素采用哪些颜色。事件处理完全超出画布的范围

您可以做的是构建自己的单击事件处理代码

在画布上绘制图像时，保存坐标、宽度和高度。然后为canvas.onclick添加一个监听器，让handler函数将鼠标坐标与保存的坐标进行比较

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

var img1 =   loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main);

var imagesLoaded = 0;
function main() {
  imagesLoaded += 1;

  if(imagesLoaded == 2) {
      // composite now
      ctx.drawImage(img1, 0, 0);

      ctx.globalAlpha = 0.5;
      ctx.drawImage(img2, 0, 0);
  }
}

function loadImage(src, onload) {
  // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being- called
  var img = new Image();

  img.onload = onload;
  img.src = src;

  return img;
}