4.10_放大镜

来源：互联网发布：网络实用技术基础作业1 编辑：程序博客网时间：2024/06/04 19:12
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>
0 0