canvas 分层事件绑定

在 Canvas 中实现分层事件绑定，可以采用以下方法：

1. 将 Canvas 分成多个图层，每个图层上绘制不同的元素。

2. 监听 Canvas 的鼠标事件，例如 `mousemove` 或 `click` 事件。

3. 在鼠标事件的监听函数中，遍历所有图层，判断鼠标事件发生的位置是否在当前图层上绘制的元素范围内，如果是，则执行该元素的事件回调函数。

以下是一个简单的示例代码：

// 获取 Canvas 元素和 Canvas 上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 定义图层
var layers = [
  {
    elements: [
      { x: 50, y: 50, width: 100, height: 50, text: 'Layer 1 Button' }
    ],
    onClick: function(element) {
      alert('Layer 1 Button clicked!');
    }
  },
  {
    elements: [
      { x: 200, y: 50, width: 100, height: 50, text: 'Layer 2 Button' }
    ],
    onClick: function(element) {
      alert('Layer 2 Button clicked!');
    }
  }
];

// 绘制图层中的元素
function drawLayers() {
  // 清空 Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 遍历图层
  for (var i = 0; i < layers.length; i++) {
    var layer = layers[i];

    // 绘制图层中的元素
    for (var j = 0; j < layer.elements.length; j++) {
      var element = layer.elements[j];

      ctx.strokeStyle = 'black';
      ctx.strokeRect(element.x, element.y, element.width, element.height);
      ctx.font = '20px Arial';
      ctx.strokeText(element.text, element.x + 10, element.y + 30);
    }
  }
}

// 监听鼠标点击事件
canvas.addEventListener('click', function(e) {
  // 获取鼠标点击的位置
  var rect = canvas.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;

  // 遍历图层
  for (var i = 0; i < layers.length; i++) {
    var layer = layers[i];

    // 遍历图层中的元素
    for (var j = 0; j < layer.elements.length; j++) {
      var element = layer.elements[j];

      // 判断鼠标点击的位置是否在元素范围内
      if (x >= element.x && x <= element.x + element.width &&
          y >= element.y && y <= element.y + element.height) {
        // 执行元素的事件回调函数
        layer.onClick(element);
        return;
      }
    }
  }
});

// 绘制图层中的元素
drawLayers();

在这个例子中，我们定义了两个图层，每个图层上都有一个按钮元素。在 `drawLayers()` 函数中，我们遍历所有图层并绘制它们上面的元素。在鼠标点击事件的监听函数中，我们也遍历所有图层，并遍历当前图层上的所有元素，判断鼠标点击的位置是否在元素范围内，如果是，则执行该元素所属图层的事件回调函数。