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

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

1. var canvas, context;
   
2. var imageWidth, imageHeight;
   
3. var img,//图片对象
   
4.   imgIsLoaded,//图片是否加载完成;
   
5.   imgX = 0,
   
6.   imgY = 0,
   
7.   imgScale = 1;
   
8. function loadImg() {
   
9.   img = new Image();
   
10.   img.onload = function () {
    
11.     imgIsLoaded = true;
    
12.     imgX = (canvas.width - img.width) / 2;
    
13.     imgY = (canvas.height - img.height) / 2
    
14.     drawImage();
    
15.   }
    
16.   img.src = 'http://127.0.0.1:52409/%E4%B8%89%E5%93%A5%E5%B0%8F%E8%88%9E.jpeg';
    
17. }
    
18. function drawImage() {
    
19.   context.clearRect(0, 0, canvas.width, canvas.height);
    
20.   context.drawImage(
    
21.     img, //规定要使用的图像、画布或视频。
    
22.     0, 0, //开始剪切的 x 坐标位置。
    
23.     img.width, img.height,  //被剪切图像的高度。
    
24.     imgX, imgY,//在画布上放置图像的 x 、y坐标位置。
    
25.     img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
    
26.   );
    
27.   canvasEventsInit()
    
28. }
    
29. /*事件注册*/
    
30. function canvasEventsInit() {
    
31.   canvas.onmousedown = function (event) {
    
32.     var pos = windowToCanvas(event.clientX, event.clientY);  //坐标转换，将窗口坐标转换成canvas的坐标
    
33. 
    
34.     canvas.onmousemove = function (evt) {  //移动
    
35.       canvas.style.cursor = 'move';
    
36.       var posl = windowToCanvas(evt.clientX, evt.clientY);
    
37.       var x = posl.x - pos.x;
    
38.       var y = posl.y - pos.y;
    
39.       pos = posl;
    
40.       imgX += x;
    
41.       imgY += y;
    
42.       drawImage();  //重新绘制图片
    
43.     };
    
44.     canvas.onmouseup = function () {
    
45.       canvas.onmousemove = null;
    
46.       canvas.onmouseup = null;
    
47.       canvas.style.cursor = 'default';
    
48.     };
    
49.   };
    
50. 
    
51.   canvas.onmousewheel = canvas.onwheel = function (event) {    //滚轮放大缩小
    
52.     var pos = windowToCanvas(event.clientX, event.clientY);
    
53.     event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40));  //获取当前鼠标的滚动情况
    
54.     if (event.wheelDelta > 0) {
    
55.       imgScale *= 2;
    
56.       imgX = imgX * 2 - pos.x;
    
57.       imgY = imgY * 2 - pos.y;
    
58.     } else {
    
59.       imgScale /= 2;
    
60.       imgX = imgX * 0.5 + pos.x * 0.5;
    
61.       imgY = imgY * 0.5 + pos.y * 0.5;
    
62.     }
    
63.     drawImage();   //重新绘制图片
    
64.   };
    
65. }
    
66. 
    
67. 
    
68. /*坐标转换*/
    
69. function windowToCanvas(x, y) {
    
70.   var box = canvas.getBoundingClientRect();  //这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
    
71.   return {
    
72.     x: x - box.left - (box.width - canvas.width) / 2,
    
73.     y: y - box.top - (box.height - canvas.height) / 2
    
74.   };
    
75. }
    
76. (function int() {
    
77.   canvas = document.getElementById('canvas'); //画布对象
    
78.   canvas.width = canvas.getBoundingClientRect().width;
    
79.   canvas.height = canvas.getBoundingClientRect().height;
    
80.   context = canvas.getContext('2d');//画布显示二维图片
    
81.   loadImg();
    
82. 
    
83. })();

复制代码

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

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

复制代码

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

1. var pos = windowToCanvas(event.clientX, event.clientY);
   
2.     var n = 1.1;
   
3.     var n2 = (1/1.1).toFixed(2);
   
4.     event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40));  //获取当前鼠标的滚动情况
   
5.     if (event.wheelDelta > 0) {
   
6.       imgScale *= n;
   
7.       imgX = imgX * n - pos.x * (n-1);
   
8.       imgY = imgY * n - pos.y * (n-1);
   
9.     } else {
   
10. 
    
11.       imgScale *= n2;
    
12.       imgX = imgX *n2+ pos.x *(1-n2);
    
13.       imgY = imgY *n2 + pos.y *(1-n2);
    
14.     }
    
15.     console.log(imgScale)
    
16.     drawImage();   //重新绘制图片
    
17.   };

复制代码