JavaScript Canvas 等比例缩放矩形: 按住 Shift 键实现

要实现按住 Shift 键时，对矩形进行等比例缩放，你可以使用以下 JavaScript 代码：

// 获取 canvas 元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 定义矩形的初始位置和尺寸
let rect = {
  x: 50,
  y: 50,
  width: 100,
  height: 100
};

// 绘制矩形
function drawRect() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

// 监听鼠标按下事件
canvas.addEventListener('mousedown', (e) => {
  const startX = e.offsetX;
  const startY = e.offsetY;

  // 监听鼠标移动事件
  canvas.addEventListener('mousemove', resizeRect);

  // 监听鼠标释放事件
  canvas.addEventListener('mouseup', () => {
    canvas.removeEventListener('mousemove', resizeRect);
  });

  function resizeRect(e) {
    const endX = e.offsetX;
    const endY = e.offsetY;
    const diffX = endX - startX;
    const diffY = endY - startY;

    // 判断是否按住 Shift 键，进行等比例缩放
    if (e.shiftKey) {
      const diff = Math.max(Math.abs(diffX), Math.abs(diffY));
      rect.width = rect.height = diff;
    } else {
      rect.width += diffX;
      rect.height += diffY;
    }

    // 更新矩形位置
    rect.x = startX - rect.width / 2;
    rect.y = startY - rect.height / 2;

    // 重新绘制矩形
    drawRect();
  }
});

// 初始绘制矩形
drawRect();

在 HTML 中，你需要添加一个 <canvas> 元素，并为其指定一个 ID，例如：

<canvas id='canvas' width='500' height='500'></canvas>

这样你就可以在 Canvas 上绘制矩形，并按住 Shift 键进行等比例缩放了。