如何在javascript中获取鼠标绘制的矩形的宽度和高度

// 监听鼠标事件
let startX, startY, distanceX, distanceY;

document.addEventListener('mousedown', function(event) {
  startX = event.clientX;
  startY = event.clientY;
});

document.addEventListener('mousemove', function(event) {
  if (startX && startY) {
    distanceX = event.clientX - startX;
    distanceY = event.clientY - startY;
    
    // 计算矩形的宽度和高度
    const width = Math.abs(distanceX);
    const height = Math.abs(distanceY);
    
    console.log('宽度：', width);
    console.log('高度：', height);
  }
});

document.addEventListener('mouseup', function(event) {
  startX = null;
  startY = null;
  
  // 最终绘制的矩形的宽度和高度
  const width = Math.abs(distanceX);
  const height = Math.abs(distanceY);
  
  console.log('最终宽度：', width);
  console.log('最终高度：', height);
});