canvas 放大镜

最新推荐文章于 2022-04-16 16:30:07 发布

小二来个美妞

最新推荐文章于 2022-04-16 16:30:07 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/z807458494y/article/details/52959776

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        .wrap{width: 900px;height: 600px;position: relative;overflow:  hidden;}
            #draw{position: absolute;display: none;border-radius: 50%;}
        </style>
    </head>
    <body>
        <div class="wrap">          
        <canvas id="drawing" width="900" height="600"></canvas>
        <canvas id="draw" width="100" height="100"></canvas>
        </div>
    </body>
    <script type="text/javascript">
        var wrap=document.querySelector('.wrap');
        var drawing=document.querySelector('#drawing');
        var draw=document.querySelector('#draw');
        var c=drawing.getContext('2d');
        var c2=draw.getContext('2d');
        var img=new Image();
        img.src='img/f8680495dd5c5d41cba6874bc522a2a2.jpg';
        img.onload=function () {
            img.width=wrap.offsetWidth;
            img.height=wrap.offsetHeight;
            c.drawImage(img,0,0);
            c2.drawImage(img,0,0);
//          console.log(wrap.offsetWidth);
        }
        wrap.addEventListener('mousemove',down,false);
        wrap.addEventListener('mouseout',out,false);
        function down (){
            draw.style.display='block';
            wrap.addEventListener('mousemove',move,false);
        }
        function move () {
            var e=window.event||event;
            draw.style.left=e.clientX-draw.offsetWidth/2+'px';
            draw.style.top=e.clientY-draw.offsetHeight/2+'px';
            console.log(e.clientX-draw.offsetWidth);
            c2.drawImage(img,(e.clientX-draw.offsetWidth/2)*1.1,(e.clientY-draw.offsetHeight/2)*1.1,100,100,0,0,200,200)
        }
        function out () {
            draw.style.display='none';
            drawing.removeEventListener('mousemove',move,false);
        }
    </script>
</html>

小二来个美妞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 放大镜

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap{width: 900px;height: 600px;position: relative;overflow: hidden;}
复制链接

扫一扫