canvas strokeRect点击事件绑定

要绑定 `strokeRect` 的点击事件，你需要将 `canvas` 元素的 `click` 事件监听器添加到它上面。然后，在事件处理程序中，你需要检查点击事件是否在 `strokeRect` 所绘制的矩形内。以下是一个示例代码：

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

// 绘制一个矩形
ctx.strokeRect(50, 50, 100, 100);

// 添加点击事件监听器
canvas.addEventListener('click', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  // 检查点击事件是否在矩形内
  if (x >= 50 && x <= 150 && y >= 50 && y <= 150) {
    console.log('点击了矩形');
  }
});

在这个示例中，我们使用 `getBoundingClientRect()` 方法来获取 `canvas` 元素相对于视口的位置。然后，我们从点击事件的 `clientX` 和 `clientY` 属性中减去 `canvas` 元素的左上角位置，得到点击事件在 `canvas` 元素内的相对位置。最后，我们检查这个位置是否在矩形内，如果是，就输出一条消息到控制台。