canvas选中某一个不规则区域（只有坐标）并返回改区域的下标

如果你想在canvas中选中一个不规则区域，可以使用以下步骤：

1. 定义一个包含所有区域坐标的数组。每个区域都是一个数组，其中包含一系列点的坐标。

var regions = [
  [[10,10],[50,10],[50,50],[10,50]],
  [[60,10],[100,10],[100,50],[60,50]],
  [[110,10],[150,10],[150,50],[110,50]],
  // ...
];

2. 在鼠标单击事件中，遍历所有区域。

canvas.onclick = function(event) {
  for (var i = 0; i < regions.length; i++) {
    if (isInside(event.offsetX, event.offsetY, regions[i])) {
      // 区域i被选中
      console.log("选中区域" + i);
    }
  }
}

3. 实现 `isInside` 函数，用于检查鼠标单击的坐标是否在一个区域内。一个简单的算法是通过射线法（ray casting）来检查。

function isInside(x, y, region) {
  var inside = false;
  for (var i = 0, j = region.length - 1; i < region.length; j = i++) {
    var xi = region[i][0], yi = region[i][1];
    var xj = region[j][0], yj = region[j][1];
    var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

这个函数使用了射线法的思想，通过检查射线与多边形边的交点数量的奇偶性来确定点是否在多边形内部。如果交点数量是奇数，则点在多边形内部；否则，点在多边形外部。

最后，如果检测到某个区域被选中，则可以返回该区域的下标。