canvas画布缩放

vue
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script>
      const canvas = document.querySelector("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = 500;
      canvas.height = 500;
      const img = new Image();
      img.src = "./pic.png";
      img.onload = function () {
        draw(0, 0, 0.5);
      };

      let isDrag = false;
      let lastX = 0,_lastX = 0;
      let lastY = 0,_lastY = 0;

      canvas.addEventListener("mousedown", function (e) {
        isDrag = true;
        lastX = e.clientX - _lastX;
        lastY = e.clientY - _lastY;
      });

      canvas.addEventListener("mousemove", function (e) {
        if (isDrag) {
          const x = e.clientX;
          const y = e.clientY;
          const dx = x - lastX;
          const dy = y - lastY;
          _lastX = dx;
          _lastY = dy;
          draw(dx, dy, scale);
        }
      });

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

      let scale = 0.5;

      canvas.onmousewheel = function (e) {
        console.log(e)
        e.preventDefault();
        const delta = e.wheelDelta / 1800;
        scale += delta;
        scale = Math.max(0.1, scale);
        scale = Math.min(scale, 4);
        draw(_lastX, _lastY, scale);
      };

      function draw(dx, dy, scale) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(lastX + dx, lastY + dy);
        ctx.scale(scale, scale);
        // 绘制图片
        ctx.drawImage(
          img,
          -img.width / 2,
          -img.height / 2,
          img.width,
          img.height
        );

        // 进行其他绘制操作，如绘制矩形边框、文字等

        // 恢复绘图状态
        ctx.restore();
      }
    </script>
  </body>
</html>
canvas画布缩放 ​

canvas画布缩放
