canvas中drawImage通过鼠标控制图片缩放速度问题？

Question

以下是显示控制图片拖动，居中，缩放的所有js代码；（代码从网上找的）

var canvas, context;
var imageWidth, imageHeight;
var img,//图片对象
  imgIsLoaded,//图片是否加载完成;
  imgX = 0,
  imgY = 0,
  imgScale = 1;
function loadImg() {
  img = new Image();
  img.onload = function () {
    imgIsLoaded = true;
    imgX = (canvas.width - img.width) / 2;
    imgY = (canvas.height - img.height) / 2
    drawImage();
  }
  img.src = 'http://127.0.0.1:52409/%E4%B8%89%E5%93%A5%E5%B0%8F%E8%88%9E.jpeg';
}
function drawImage() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(
    img, //规定要使用的图像、画布或视频。
    0, 0, //开始剪切的 x 坐标位置。
    img.width, img.height,  //被剪切图像的高度。
    imgX, imgY,//在画布上放置图像的 x 、y坐标位置。
    img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
  );
  canvasEventsInit()
}
/*事件注册*/
function canvasEventsInit() {
  canvas.onmousedown = function (event) {
    var pos = windowToCanvas(event.clientX, event.clientY);  //坐标转换，将窗口坐标转换成canvas的坐标

    canvas.onmousemove = function (evt) {  //移动
      canvas.style.cursor = 'move';
      var posl = windowToCanvas(evt.clientX, evt.clientY);
      var x = posl.x - pos.x;
      var y = posl.y - pos.y;
      pos = posl;
      imgX += x;
      imgY += y;
      drawImage();  //重新绘制图片
    };
    canvas.onmouseup = function () {
      canvas.onmousemove = null;
      canvas.onmouseup = null;
      canvas.style.cursor = 'default';
    };
  };

  canvas.onmousewheel = canvas.onwheel = function (event) {    //滚轮放大缩小
    var pos = windowToCanvas(event.clientX, event.clientY);
    event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40));  //获取当前鼠标的滚动情况
    if (event.wheelDelta > 0) {
      imgScale *= 2;
      imgX = imgX * 2 - pos.x;
      imgY = imgY * 2 - pos.y;
    } else {
      imgScale /= 2;
      imgX = imgX * 0.5 + pos.x * 0.5;
      imgY = imgY * 0.5 + pos.y * 0.5;
    }
    drawImage();   //重新绘制图片
  };
}


/*坐标转换*/
function windowToCanvas(x, y) {
  var box = canvas.getBoundingClientRect();  //这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
  return {
    x: x - box.left - (box.width - canvas.width) / 2,
    y: y - box.top - (box.height - canvas.height) / 2
  };
}
(function int() {
  canvas = document.getElementById('canvas'); //画布对象
  canvas.width = canvas.getBoundingClientRect().width;
  canvas.height = canvas.getBoundingClientRect().height;
  context = canvas.getContext('2d');//画布显示二维图片
  loadImg();

})();

我的问题是以下这个代码中的这个缩放的原理（如何计算的）？我如何控制这个缩放速度慢一些？

 canvas.onmousewheel = canvas.onwheel = function (event) {    //滚轮放大缩小
    var pos = windowToCanvas(event.clientX, event.clientY);
    event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40));  //获取当前鼠标的滚动情况
    if (event.wheelDelta > 0) {
      imgScale *= 2;
      imgX = imgX * 2 - pos.x;
      imgY = imgY * 2 - pos.y;
    } else {
      imgScale /= 2;
      imgX = imgX * 0.5 + pos.x * 0.5;
      imgY = imgY * 0.5 + pos.y * 0.5;
    }
    drawImage();   //重新绘制图片
  };

Answer 1

改 imgScale，取值大于 1小于2。
然后紧跟着的两行代码，为 2 的参数跟着 imgScale 变，另一个则始终为 1 / imgScale。