canvas 滚动鼠标缩放图片不失真

要实现 canvas 中的图片缩放，并且不失真，可以使用以下步骤：

1. 在 canvas 中绘制图片，并确定图片的初始位置和尺寸。
2. 监听 canvas 的鼠标滚轮事件，根据滚轮的方向确定图片的缩放比例。
3. 在缩放图片之前，需要将画布的坐标系原点移到图片的中心位置，这样才能保证缩放的同时，图片的中心点不会改变。
4. 缩放图片之后，需要将画布的坐标系原点移到画布左上角，这样才能保证后续的绘制不会受到影响。
5. 在绘制图片时，需要使用 drawImage 方法，并且指定图片的位置和尺寸。

以下是示例代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'image.png';

let scale = 1;
let x = canvas.width / 2;
let y = canvas.height / 2;

// 绘制图片
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(x, y);
  ctx.scale(scale, scale);
  ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height);
  ctx.restore();
}

// 监听鼠标滚轮事件
canvas.addEventListener('wheel', e => {
  e.preventDefault();
  const delta = Math.sign(e.deltaY);
  const factor = 1.1;
  scale *= delta > 0 ? 1 / factor : factor;
  draw();
});

draw();

以上代码中，我们首先在 canvas 中绘制了一张图片，并且确定了图片的初始位置和尺寸。然后，我们监听了鼠标滚轮事件，并根据滚轮的方向确定了图片的缩放比例。在缩放图片之前，我们将画布的坐标系原点移到了图片的中心位置，这样才能保证缩放的同时，图片的中心点不会改变。缩放图片之后，我们将画布的坐标系原点移到了画布左上角，这样才能保证后续的绘制不会受到影响。最后，在绘制图片时，我们使用 drawImage 方法，并且指定了图片的位置和尺寸。