js canvas 拖动缩放宽高

要实现在 JavaScript 的 Canvas 中拖动和缩放宽高，可以使用以下步骤：

在 HTML 中创建一个 Canvas 元素，并给它一个唯一的 id：

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

在 JavaScript 中获取 Canvas 元素，并设置宽度和高度：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;

创建一个变量来存储 Canvas 的当前宽度和高度：

let canvasWidth = canvas.width;
let canvasHeight = canvas.height;

创建变量来存储鼠标的起始位置和 Canvas 的起始宽度和高度：

let startX, startY, startWidth, startHeight;

添加鼠标事件监听器来实现拖动和缩放效果：

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

function handleMouseDown(event) {
  startX = event.offsetX;
  startY = event.offsetY;
  startWidth = canvasWidth;
  startHeight = canvasHeight;
}

function handleMouseMove(event) {
  if (event.buttons === 1) {
    const offsetX = event.offsetX - startX;
    const offsetY = event.offsetY - startY;
    canvasWidth = startWidth + offsetX;
    canvasHeight = startHeight + offsetY;
    redrawCanvas();
  }
}

function handleMouseUp() {
  // 可以在这里保存最终的宽度和高度
}

function redrawCanvas() {
  // 清空 Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 设置新的宽度和高度
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  
  // 重新绘制内容
  // ...
}

在 redrawCanvas 函数中重新绘制你的内容，例如绘制一个矩形：

function redrawCanvas() {
  // ...

  // 绘制矩形
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
}

现在，当你在 Canvas 上按下鼠标并拖动时，Canvas 的宽度和高度会随着鼠标移动而改变，同时会重新绘制内容