SOURCE

const canvas = document.getElementById('canvas');
let isDrawing = false;
let startX, startY, endX, endY;
const rectangles = []; // 保存长方形的数组

canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);

function handleMouseDown(event) {
  isDrawing = true;
  startX = event.clientX;
  startY = event.clientY;
}

function handleMouseMove(event) {
  if (!isDrawing) return;

  const rect = canvas.getBoundingClientRect();
  endX = event.clientX - rect.left;
  endY = event.clientY - rect.top;

  // 清除之前的绘制
  canvas.innerHTML = '';

  // 重新渲染保存的长方形
  rectangles.forEach(rectangle => {
    const rectEl = document.createElement('div');
    rectEl.style.position = 'absolute';
    rectEl.style.left = rectangle.startX + 'px';
    rectEl.style.top = rectangle.startY + 'px';
    rectEl.style.width = rectangle.endX - rectangle.startX + 'px';
    rectEl.style.height = rectangle.endY - rectangle.startY + 'px';
    rectEl.style.border = '1px solid black';
    canvas.appendChild(rectEl);
  });

  // 绘制当前的长方形
  const currentRect = document.createElement('div');
  currentRect.style.position = 'absolute';
  currentRect.style.left = startX + 'px';
  currentRect.style.top = startY + 'px';
  currentRect.style.width = endX - startX + 'px';
  currentRect.style.height = endY - startY + 'px';
  currentRect.style.border = '1px solid black';
  canvas.appendChild(currentRect);
}

function handleMouseUp(event) {
  isDrawing = false;

  // 保存当前绘制的长方形
  const rectangle = {
    startX,
    startY,
    endX,
    endY
  };
  rectangles.push(rectangle);

  // 获取四个点的坐标
  const point1 = { x: startX, y: startY };
  const point2 = { x: endX, y: startY };
  const point3 = { x: endX, y: endY };
  const point4 = { x: startX, y: endY };

  console.log('Point 1:', point1);
  console.log('Point 2:', point2);
  console.log('Point 3:', point3);
  console.log('Point 4:', point4);
}

<div id="canvas" style="width: 500px; height: 500px; border: 1px solid black;"></div>