js canvas 生成矩形按住shift图形不动可以像四周等比例缩放

要实现按住Shift键时，可以按四周等比例缩放矩形的效果，可以使用Canvas的scale方法来实现。

首先，你需要监听键盘事件，检测Shift键是否被按下。然后，在绘制矩形时，根据Shift键的状态来判断是否对矩形进行等比例缩放。

下面是一个示例代码：

// 获取Canvas元素和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 矩形的初始位置和大小
let rect = {
  x: 50,
  y: 50,
  width: 100,
  height: 100
};

// 监听键盘按下和抬起事件
let shiftPressed = false;
document.addEventListener('keydown', function(event) {
  if (event.key === 'Shift') {
    shiftPressed = true;
  }
});

document.addEventListener('keyup', function(event) {
  if (event.key === 'Shift') {
    shiftPressed = false;
  }
});

// 绘制矩形
function drawRect() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 如果Shift键被按下，则计算缩放比例
  let scale = shiftPressed ? rect.width / rect.height : 1;
  
  // 缩放画布
  ctx.scale(scale, scale);
  
  // 绘制矩形
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
  
  // 恢复画布缩放
  ctx.setTransform(1, 0, 0, 1, 0, 0);
}

// 初始化
function init() {
  drawRect();
}

init();

在上面的示例中，我们监听了键盘的按下和抬起事件，并通过shiftPressed变量来保存Shift键的状态。在绘制矩形时，我们通过判断shiftPressed的值来决定是否进行等比例缩放。如果Shift键被按下，我们计算矩形的宽高比并将画布进行相应的缩放，然后绘制矩形。最后，我们通过调用setTransform方法恢复画布的缩放。

你可以将上面的代码添加到HTML文件中，并在Canvas上绘制矩形。然后，按住Shift键并拖动矩形，你会发现矩形会按四周等比例缩放