canvas实现鼠标框选瀑布图，并清除框选矩形

Canvas 是HTML5提供的一种绘图API，可以用于动态创建图形、动画效果等。在绘制瀑布图时，我们可以利用canvas的事件处理机制结合`<input type="rect">`元素（即鼠标选择区域）来实现框选功能。下面是一个简单的步骤描述：

1. **初始化 canvas 和输入框**：
创建一个 canvas 元素，并添加一个输入框，用于显示当前选定的矩形。

2. **设置事件监听**：
- 给 canvas 添加 `mousedown` 和 `mouseup` 事件，当鼠标按下时开始画框，抬起时结束画框。
- 给输入框添加 `change` 事件，每当矩形大小改变时更新输入框的内容。

3. **画框过程**：
- 使用 `mousedown` 事件获取初始点击位置。
- 当用户拖动鼠标时，计算新的边界并使用 `fillRect()` 或者 `strokeRect()` 方法在 canvas 上绘制矩形。
- 保存旧的矩形选择，以便于清除或切换选择。

4. **清除框选矩形**：
- 使用 `clearRect()` 方法清除之前绘制的矩形区域，或者在结束框选后，直接将 `style.display` 设置为 `none` 来隐藏它。

5. **获取和展示选定范围**：
- 矩形选择结束后，从 canvas 的坐标转换到可视窗口的坐标，然后将其作为输入框的值显示出来。

// 示例代码片段（简化版）
let canvas = document.getElementById('myCanvas');
let rectInput = document.getElementById('rectBox');

canvas.addEventListener('mousedown', startSelect);
canvas.addEventListener('mouseup', endSelect);

function startSelect(e) {
  // 记录起点
  let startX = e.clientX;
  let startY = e.clientY;
  // 开始跟踪选择
  canvas.addEventListener('mousemove', drawRect);
}

function endSelect(e) {
  // 清除选择区域
  clearRect();
  // 移除mousemove事件
  canvas.removeEventListener('mousemove', drawRect);
}

function drawRect(e) {
  // ...绘制矩形...
  rectInput.value = `${startX}-${endX} ${startY}-${endY}`;
}

function clearRect() {
  // 清除已选矩形区域
  // canvas.clearRect(startX, startY, endX - startX, endY - startY);
  // 或者设置输入框不可见
  rectInput.style.display = 'none';
}