canvas 多个路径绑定事件

可以使用 `isPointInPath` 方法检测鼠标点击的位置是否在某个路径内，从而实现多个路径绑定事件。具体步骤如下：

1. 首先需要创建多个路径，可以使用 `beginPath` 和 `moveTo` 等方法绘制出不同的路径。

2. 对于每个路径，可以使用 `isPointInPath` 方法检测鼠标点击的位置是否在路径内。可以在 canvas 的 click 事件中获取鼠标点击的坐标，然后遍历所有路径，判断是否在路径内。

3. 如果鼠标点击的位置在路径内，则执行对应的事件处理函数。

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

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 绘制两个矩形路径
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.fillStyle = 'red';
ctx.fill();

ctx.beginPath();
ctx.rect(120, 10, 100, 100);
ctx.fillStyle = 'blue';
ctx.fill();

// canvas 点击事件
canvas.addEventListener('click', function(e) {
  const x = e.offsetX;
  const y = e.offsetY;

  // 遍历所有路径，判断鼠标点击的位置是否在路径内
  if (ctx.isPointInPath(x, y)) {
    // 执行对应的事件处理函数
    console.log('点击了矩形');
  }
});