js canvas 生成矩形固定一个点按住shift等比例缩放

您可以通过以下步骤在JavaScript的canvas中实现固定一个点并按住Shift键进行等比例缩放的矩形：

创建一个canvas元素：

<canvas id="myCanvas"></canvas>

获取canvas元素的上下文：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

定义矩形的初始位置和尺寸：

var rect = {
  x: 50,
  y: 50,
  width: 100,
  height: 100
};

监听鼠标按下和松开事件：

var isDragging = false;
var startX, startY;

canvas.addEventListener("mousedown", function(e) {
  startX = e.clientX;
  startY = e.clientY;
  isDragging = true;
});

canvas.addEventListener("mouseup", function() {
  isDragging = false;
});

监听鼠标移动事件，判断是否按住Shift键并进行等比例缩放：

canvas.addEventListener("mousemove", function(e) {
  if (!isDragging) {
    return;
  }

  var deltaX = e.clientX - startX;
  var deltaY = e.clientY - startY;

  if (e.shiftKey) {
    var scale = Math.abs(deltaX) > Math.abs(deltaY) ? Math.abs(deltaX) : Math.abs(deltaY);
    if (deltaX < 0) {
      scale = -scale;
    }

    rect.width += scale;
    rect.height += scale;
  } else {
    rect.x += deltaX;
    rect.y += deltaY;
  }

  startX = e.clientX;
  startY = e.clientY;

  drawRect();
});

定义一个绘制矩形的函数：

function drawRect() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

调用绘制矩形的函数进行初始绘制：

drawRect();

这样，您就可以在canvas中实现固定一个点并按住Shift键进行等比例缩放的矩形了