canvas 放大镜

最新推荐文章于 2024-01-26 11:25:27 发布

小二来个美妞

最新推荐文章于 2024-01-26 11:25:27 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/z807458494y/article/details/52959776

本文介绍了一种使用HTML5 Canvas实现的鼠标悬停交互效果。当用户将鼠标悬停在画布上时，会有一个放大的局部视图跟随鼠标移动，展示了如何通过JavaScript监听鼠标事件并实时更新局部视图的位置。

<!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>