如何使用 scale 和 translate 放大一个点？

您可以使用缩放和平移方法放大特定图像。在该缩放处理，图像应该是放大从图像的中心。在矩形的情况下，该图像具有一定的宽度和高度，并且根据图像的形状具有适当的尺寸。在放大过程中，图像会根据要求变大。在图像查看器中，这种放大过程非常重要。要获得此过程，您可以使用 scale() 和 translate() 方法。

scale() 方法将当前图形缩放为更小或更大的尺寸。如果您缩放画布，所有未来的绘图也将被缩放。该位置也将被缩放。如果您 scale(2, 2) 绘图将被放置在您指定的距画布左侧和顶部的两倍远的位置。 translate() 方法将 (0, 0) 位置重新映射为画布。如果您有一个图像并将其缩放 2 倍，则右下角的点将在 x 和 y 方向上加倍，因为 (0, 0) 是图像的左上角。如果您想缩放中心的图像，则解决方案如下：

• 翻译图像。
• 按 x 和 y 因子缩放图像。
• 将图像翻译回来。

下面的例子说明了上述方法：
例子：

  

    
        Zooming process using scale and trsnslate
    
    
        #canvas {
            border: 2px solid black;
        }
        h1{
            color: green;
        }
    

  

    
        GeeksforGeeks
        Scroll your mouse inside the canvas
        
    
    
        var zoomIntensity = 0.1;
  
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var width = 600;
        var height = 200;
  
        var scale = 1;
        var orgnx = 0;
        var orgny = 0;
        var visibleWidth = width;
        var visibleHeight = height;
  
        function draw() {
            context.fillStyle = "white";
            context.fillRect(orgnx, orgny, 800 / scale, 800 / scale);
            context.fillStyle = "green";
            context.fillRect(250,50,100,100); 
        }
        setInterval(draw, 800 / 60);
          
        // Scroll effect function
        canvas.onwheel = function(event) {
            event.preventDefault();
            var x = event.clientX - canvas.offsetLeft;
            var y = event.clientY - canvas.offsetTop;
            var scroll = event.deltaY < 0 ? 1 : -2;
  
            var zoom = Math.exp(scroll * zoomIntensity);
  
            context.translate(orgnx, orgny);
  
            orgnx -= x / (scale * zoom) - x / scale;
            orgny -= y / (scale * zoom) - y / scale;
  
            context.scale(zoom, zoom);
            context.translate(-orgnx, -orgny);
  
            // Updating scale and visisble width and height
            scale *= zoom;
            visibleWidth = width / scale;
            visibleHeight = height / scale;
        }
    

  

输出 ：