canvas 路径绑定事件

要在 Canvas 上绑定事件，通常的方法是先监听鼠标事件，然后根据鼠标位置判断是否在路径上。具体步骤如下：

1. 获取 Canvas 对象和 2D 上下文：

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

2. 绘制路径：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();

3. 监听鼠标事件：

canvas.addEventListener('mousemove', function(event) {
  var x = event.clientX - canvas.offsetLeft;
  var y = event.clientY - canvas.offsetTop;

  if (ctx.isPointInPath(x, y)) {
    // 鼠标在路径内部
    console.log('Mouse is inside the path');
  } else {
    // 鼠标在路径外部
    console.log('Mouse is outside the path');
  }
});

在鼠标移动时，获取鼠标位置并使用 `isPointInPath()` 方法检查是否在路径内部。如果在路径内部，则执行相应的操作。