4.10_放大镜

最新推荐文章于 2024-04-17 20:34:48 发布

信封中的阳光

最新推荐文章于 2024-04-17 20:34:48 发布

阅读量212

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71723947

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

4.10_放大镜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>放大镜</title>
        <style>
            body{
                background: #eee;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin-left: 20px;
                margin-top: 20px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="800" height="520"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var magnifyRectangle = {}; 
        var scaledMagnifyRectangle = {};

        var image = new Image();
        var dragging = false;
        var imageData =null;

        var manifyingGlassX; //放大镜片的中心x
        var manifyingGlassY; //放大镜片的中心y

        var manifyingRuduis = 100;
        var manifyingScale = 2;

        //初始化
        image.src = 'img/waterfall.jpg';
        image.onload = function(){
            context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);
        }

        //事件
        canvas.onmousedown = function(e){
            var loc = windowToCanvas(e.clientX,e.clientY);
            e.preventDefault();

            magnifyRectangle.x = loc.x;
            magnifyRectangle.y = loc.y;

            dragging = true;
        }
        canvas.onmousemove = function(e){
            var loc;
            if(dragging){
                loc = windowToCanvas(e.clientX,e.clientY);
                //擦除上次放大镜
                eraseMagnifyingGlass();
                //绘制新的放大镜
                drawMagnifyingGlass(loc);
            }
        }
        canvas.onmouseup = function(){
            eraseMagnifyingGlass();
            dragging = false;
            imageData =null;
        }
        //擦除上次放大镜
        function eraseMagnifyingGlass(){
            if(imageData != null ){
                context.putImageData(imageData,magnifyRectangle.x,magnifyRectangle.y);
            }
        }
        //绘制新的放大镜
        function drawMagnifyingGlass(mouse){

            manifyingGlassX = mouse.x;
            manifyingGlassY = mouse.y;

            calculateMagnifyRectangle(mouse);

            //得到放大区域在放大之前的数据
            imageData = context.getImageData(magnifyRectangle.x,
                                            magnifyRectangle.y,
                                            magnifyRectangle.width,
                                            magnifyRectangle.height);

            context.save();


            scaledMagnifyRectangle.width = magnifyRectangle.width*manifyingScale;
            scaledMagnifyRectangle.height = magnifyRectangle.height*manifyingScale;
            scaledMagnifyRectangle.x = manifyingGlassX-scaledMagnifyRectangle.width/2;
            scaledMagnifyRectangle.y = manifyingGlassY-scaledMagnifyRectangle.height/2;

            setClip();

            context.drawImage(canvas,
                magnifyRectangle.x,
                magnifyRectangle.y,
                magnifyRectangle.width,
                magnifyRectangle.height,
                scaledMagnifyRectangle.x,
                scaledMagnifyRectangle.y,
                scaledMagnifyRectangle.width,
                scaledMagnifyRectangle.height);

            context.restore();
        }
        //设置放大镜剪辑区域
        function setClip(){
            context.beginPath();
            context.arc(manifyingGlassX,manifyingGlassY,manifyingRuduis,0,Math.PI*2,false);
            context.clip();
        }
        //计算放大镜所在矩形
        function calculateMagnifyRectangle(mouse){
            magnifyRectangle.x = mouse.x - manifyingRuduis;
            magnifyRectangle.y = mouse.y - manifyingRuduis;
            magnifyRectangle.width = 2*manifyingRuduis;
            magnifyRectangle.height = 2*manifyingRuduis;
        }
        //转换坐标
        function windowToCanvas(x,y){
            var bbox = canvas.getBoundingClientRect();
            return{
                x: x - bbox.left*(canvas.width/bbox.width),
                y: y - bbox.top *(canvas.height/bbox.height)
            }
        }
    </script>
</html>