Canvas中添加事件按住鼠标移动时不能超过Canvas的边界

要限制鼠标移动不能超过 Canvas 的边界，可以通过监听鼠标按下、移动和抬起事件，计算出鼠标在 Canvas 中的坐标，然后与 Canvas 的宽高进行比较，限制鼠标移动范围。

具体实现可以参考以下代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect(); // 获取 Canvas 元素相对于视口的位置和大小

let isDrawing = false;
let startX = 0;
let startY = 0;
let endX = 0;
let endY = 0;

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  startX = e.clientX - rect.left;
  startY = e.clientY - rect.top;
});

canvas.addEventListener('mousemove', (e) => {
  if (isDrawing) {
    endX = e.clientX - rect.left;
    endY = e.clientY - rect.top;

    // 计算鼠标在 Canvas 中的坐标，并限制移动范围
    const x = Math.min(Math.max(endX, 0), canvas.width);
    const y = Math.min(Math.max(endY, 0), canvas.height);

    // 绘制路径
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(x, y);
    ctx.stroke();

    // 更新起点坐标
    startX = x;
    startY = y;
  }
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

在上述代码中，我们监听了 Canvas 的鼠标按下、移动和抬起事件。当鼠标按下时，设置 `isDrawing` 为 `true`，并记录下起点坐标。当鼠标移动时，如果 `isDrawing` 为 `true`，则计算出鼠标在 Canvas 中的坐标，并限制移动范围。然后绘制路径，并更新起点坐标。当鼠标抬起时，设置 `isDrawing` 为 `false`，结束绘制。