canvas放大两种方式，图片放大，放大倍数可以调整，根据自己需求修改

最新推荐文章于 2024-03-29 17:03:34 发布

你还满意吗

最新推荐文章于 2024-03-29 17:03:34 发布

阅读量7.4k

点赞数 2

watermelon

本文链接：https://blog.csdn.net/zhou_xiong1130/article/details/108621179

版权

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍两种在网页上实现图像局部放大效果的方法。第一种方法通过调整canvas元素的放大倍数并绘制放大部分，创建动态图像放大镜效果。第二种方法使用额外的canvas画布来显示图像的放大部分，提供更灵活的放大展示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：
在图形上面进行放大，放大倍数可以调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glass</title>
    <style type="text/css">
        #canvas {
            display: block;
            border: 1px solid red;
            margin: 0 auto;
            cursor: crosshair;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="800" height="500">
</canvas>

<img src="e.jpg" style="display: none" id="img">

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = document.getElementById("img");
    var centerPoint = {};
    var originalRadius = 50;
    var originalRectangle = {};
    var scale = 5;
    var scaleGlassRectangle
    centerPoint.x = 200;
    centerPoint.y = 200;
    window.onload = function () {
        addListener();
        draw();
    }
    function drawBackGround() {
        context.drawImage(img, 0, 0);
    }
    function calOriginalRectangle(point) {
        originalRectangle.x = point.x - originalRadius;
        originalRectangle.y = point.y - originalRadius;
        originalRectangle.width = originalRadius * 2;
        originalRectangle.height = originalRadius * 2;
    }
    function drawMagnifyingGlass() {

        scaleGlassRectangle = {
            x: centerPoint.x - originalRectangle.width * scale / 2,
            y: centerPoint.y - originalRectangle.height * scale / 2,
            width: originalRectangle.width * scale,
            height: originalRectangle.height * scale
        }
        context.save();
        context.beginPath();
        context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
        context.clip();
        context.drawImage(canvas,
                originalRectangle.x, originalRectangle.y,
                originalRectangle.width, originalRectangle.height,
                scaleGlassRectangle.x, scaleGlassRectangle.y,
                scaleGlassRectangle.width, scaleGlassRectangle.height
        )
        context.restore();
        context.beginPath();
        var gradient = context.createRadialGradient(
                centerPoint.x, centerPoint.y, originalRadius - 5,
                centerPoint.x, centerPoint.y, originalRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0.2)');
        gradient.addColorStop(0.80, 'silver');
        gradient.addColorStop(0.90, 'silver');
        gradient.addColorStop(1.0, 'rgba(150,150,150,0.9)');
        context.strokeStyle = gradient;
        context.lineWidth = 5;
        context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
        context.stroke();
    }
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBackGround();
        calOriginalRectangle(centerPoint);
        drawMagnifyingGlass();
    }
    function addListener() {
        canvas.onmousemove = function (e) {
            centerPoint = windowToCanvas(e.clientX, e.clientY);
            draw();
        }
    }
    function windowToCanvas(x, y) {
        var bbox = canvas.getBoundingClientRect();
        var bbox = canvas.getBoundingClientRect();
        return {x: x - bbox.left, y: y - bbox.top}
    }
</script>
</body>
</html>

放大前
放大后
第二种：
新建一个canvas画布，在上面显示放大部分

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #copycanvas {
            border: 1px solid #000;
            display: none;
        }

        #square {
            width: 90px;
            height: 90px;
            background-color: #cc3;
            border: 1px solid #f00;
            opacity: 0.5;
            position: absolute;
            z-index: 999;
            display: none;
            cursor: crosshair;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="450" height="300"></canvas>
    <button id="big">局域放大</button>
    <canvas id="copycanvas" width="450" height="300"></canvas>
    <div id="square"></div>
    <script>
        var canvas = document.getElementById('canvas'), 
            context = canvas.getContext('2d'),  
            copycanvas = document.getElementById('copycanvas'),  
            copycontext = copycanvas.getContext('2d'),
            square = document.getElementById('square'),  
            squaredata = {},
            box = canvas.getBoundingClientRect();
        var btn = document.getElementById('big')
        image = new Image();
        image.src = "e.jpg";
        image.onload = function () {
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
        };
        btn.onclick = function () {
            canvas.onmouseover = function (e) {
                var x = e.clientX, 
                    y = e.clientY;
                createSquare(x, y); 
            };
            window.onmousemove = function (e) {
                var x = e.clientX,
                    y = e.clientY;
                if (x >= canvas.offsetLeft && x <= canvas.offsetLeft + canvas.width &&
                    y >= canvas.offsetTop && y <= canvas.offsetTop + canvas.height) {
                    createSquare(x, y);
                } else {
                    hideSquare();
                    hideCanvas();
                }
            }
            function showSquare() {
                square.style.display = 'block';
            }
            function hideSquare() {
                square.style.display = 'none';
            }
            function showCanvas() {
                copycanvas.style.display = "inline";
            }
            function hideCanvas() {
                copycanvas.style.display = "none";
            }
            function createSquare(x, y) {
                x = x - 45 < canvas.offsetLeft ? canvas.offsetLeft : x - 45;
                y = y - 45 < canvas.offsetTop ? canvas.offsetTop : y - 45;
                x = x + 90 < box.right ? x : box.right - 90;
                y = y + 90 < box.bottom ? y : box.bottom - 90;
                squaredata.left = x;
                squaredata.top = y;
                moveSquare(x, y);
            }
            function moveSquare(x, y) {
                square.style.left = x + "px";
                square.style.top = y + "px";
                showCanvas();
                showSquare();
                copy();
            }
            function copy() {
                copycontext.drawImage(
                    canvas,
                    squaredata.left - box.left,
                    squaredata.top - box.top,
                    90,
                    90,
                    0,
                    0,
                    copycanvas.width,
                    copycanvas.height
                );
            }
        }

    </script>
</body>

</html>

放大前
放大后